面板可调整大小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修饰符防止文本选中

<div class="layout-container" @mousemove.prevent="bindMouseover($event)" @mouseup.prevent="bindMouseup">

bindMouseover (e) {
  this.mouse_position_x = e.x   // 鼠标移动到的位置
},
bindMouseup () {
  clearInterval(t