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

╰+哭是因爲堅強的太久メ 2022-09-05 06:10 441阅读 0赞

基础布局

执行方法

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
          }
        })
      },
    }

线的样式