面板可调整大小resizable（基于vue）

       最近在做vue项目中遇到需要通过拖动面板边缘，动态调整面板宽度的问题，最开始是打算找一个vue组件解决得了，后来想了一下应该也挺简单的就自己实现了。项目中是左右宽度调整，这里只介绍左右面板resizable，上下调整原理是一样的。

       思路：

       step1、在左右面板之间添加一个div，div样式如下：

.resizable-widget {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 255px;
  right: 0;
  width: 5px;
  cursor: col-resize;
}

    然后添加两个小竖线：

.resizable-widget::after {
  content: '';
  width: 1px;
  height: 12px;
  border-left: 2px solid #ccc;
  border-right: 2px solid #ccc;
  position: absolute;
  top: 50%;
  left: 1px;
}

step2:  给最外层div（或document）绑定mouseover和mouseup事件，添加prevent修饰符防止文本选中

bindMouseover (e) {
  this.mouse_position_x = e.x   // 鼠标移动到的位置
},
bindMouseup () {
  clearInterval(this.timerId)   // 鼠标抬起，清除定时器
}

step3: 给resizable元素添加mousedown事件

resizableMousedown () {
  if (!this.timerId) {
    clearInterval(this.timerId)
  }
  this.timerId = setInterval(() => {
    this.move_x = this.mouse_position_x - this.contentWidth   // 10ms计算一次移动的宽度，contentWidth初始值是250px
  }, 10)
}

最后，在computed属性中计算个面板的宽度值即可