Vue 实现左右拖动改变元素宽度

基础布局

<div ref="lucky"> 左侧 </div>
<!--  拖拽线  -->
<div  id="line" ref="moveDom" class="dragLine"/>
<div  ref="rightDom"> 右侧 </div>

执行方法

mounted() {
    
    
  this.options()
  this.drag()
},

定义方法

methods: {
    
    
  // 拖动改变宽度
  moveHandle(nowClient) {
    
    
    this.$nextTick(() => {
    
    
      let changeWidth = nowClient + 15
      let oop = document.getElementById('luckysheet')
      let remainWidth = document.body.clientWidth - nowClient
      // oop.style.width = changeWidth + 'px;'
      this.$refs.lucky.style.setProperty('width', changeWidth + 'px', 'important');
      this.$refs.rightDom.style.width = remainWidth + 'px'
      this.$refs.moveDom.style.right = remainWidth + 'px'
    })
    // 重置表格
    this.options()
  },
  // 拖动
  drag() {
    
    
    let _that = this;
    _that.$nextTick(() => {
    
    
      const moveDom = document.getElementById('line')
      moveDom.onmousedown = function(e) {
    
    
        _that.clientStartX = e.clientX
        document.onmousemove = function(e) {
    
    
          _that.moveHandle(e.clientX)
          return false
        }
        document.onmouseup = function() {
    
    
          document.onmousemove = null
          document.onmouseup = null
        }
        return false
      }
    })
  },
}

线的样式

<style scoped>
  /*线的样式*/
  .dragLine {
    
    
    border-right: 2px solid #dcdfe6;
    cursor: col-resize;
    position: absolute;
    right: 40%;
    top: 40px;
    height: calc(100% - 40px);
    z-index: 999;
  }
</style>