vue页面实现左右拖拽

实现左右或者上下div两部分拖动，宽度或者高度自动变化,实现流畅平滑的变化，还可以是实现拖动到一定宽度就不让拖动了，如果你不需要最小宽度，就直接去掉样式就行

上下div拖动，自动变化高度同样可以以相同的原理来实现。

<div class="content">
	<div class="left" ref="refLeft"></div>
	<div class="center"
	ref="refCenter"
	@mousedown.stop.prevent="startResize"></div>
	<div class="right" ref="refRight"></div>
</div>

这是对应的样式，根据自身情况，可以自己调整样式实现相关功能

.content{
    height: 100%;
    width:100%
    display: flex;
    .left {
      flex: 1;
      height: 100%;
      min-width: 200px;
      width:600px
    }
    .resize {
      cursor: col-resize;//拖动鼠标样式
      height: 100%;
      width: 8px;
    }
    .right {
      width: calc(100% - 600px);
      min-width: calc(100% - 600px);
      height: 100%;
    }
  }

// 左右拖动这里的一个大概说明，就是把减少的div宽度，加到另一个div的宽度上去，就是现实一增一减；变量自己取data定义就行了，
    startResize(event) {
      this.startX = event.clientX;
      this.startWidth = this.$refs.refRight.offsetWidth;
      console.log(event.clientX,this.startWidth,'this.startWidth')
      this.isResizing = true;

      window.addEventListener('mousemove', this.doResize);
      window.addEventListener('mouseup', this.stopResize);
    },
    doResize(event) {
      if (this.isResizing) {console.log(event.clientX,'this.startWidth')
        const deltaX = -event.clientX + this.startX;
        this.$refs.refRight.style.width = this.startWidth + deltaX + 'px';
      }
    },
    stopResize() {
      this.isResizing = false;
      window.removeEventListener('mousemove', this.doResize);
      window.removeEventListener('mouseup', this.stopResize);
    },