vuejs中拖动改变元素宽度实现宽度自适应大小

需求效果：

原理：拖动效果的实现基本都是dom操作来实现的，通过拖动分隔线，计算分隔线与浏览器边框的距离(left)，来实现拖动之后的不同宽度的计算；当拖动分隔线1时，计算元素框left和mid；当拖动分隔线2时，计算元素框mid和right；同时设置元素框最小值以防止元素框拖没了（其实是被遮住了）。使用setcapture() 和 releasecapture()的函数功能指定窗口里设置鼠标捕获。

在vuejs中使用，methods设置方法，mounted钩子挂载：

html部分代码：

<template>
<div>
  <ul class="box" ref="box">
    <li class="left" ref="left">西瓜</li>
    <li class="resize" ref="resize"></li>
    <li class="mid" ref="mid">备注2</li>
    <li class="resize2" ref="resize2"></li>
     <li class="right" ref="right">test</li>
  </ul>
  <ul class="box" ref="box">
    <li class="left" ref="left">芒果</li>
    <li class="resize" ref="resize"></li>
    <li class="mid" ref="mid">备注</li>
    <li class="resize2" ref="resize2"></li>
    <li class="right" ref="right">test</li>
  </ul>
</div>
</template>

js部分代码

<script>
export default {
  mounted () {
    this.dragcontrollerdiv();
  },
  methods: {
    dragcontrollerdiv: function () {
      var resize = document.getelementsbyclassname('resize');
      var resize2 = document.getelementsbyclassname('resize2');
      var left = document.getelementsbyclassname('left');
      var right = document.getelementsbyclassname('right');
      var mid = document.getelementsbyclassname('mid');
      var box = document.getelementsbyclassname('box');
      for (let i = 0; i < resize.length; i++) {
        resize[i].onmousedown = function (e) {
          var startx = e.clientx;
          resize[i].left = resize[i].offsetleft;
          document.onmousemove = function (e) {
            var endx = e.clientx;
            var rightw = right[i].offsetwidth;
            var movelen = resize[i].left + (endx - startx);
            var maxt = box[i].clientwidth - resize[i].offsetwidth;
            if (movelen < 150) movelen = 150; 
            if (movelen > maxt - rightw - 150) movelen = maxt - rightw - 150;

            resize[i].style.left = movelen;

            for (let j = 0; j < left.length; j++) {
              left[j].style.width = movelen + 'px';
              mid[j].style.width = (box[i].clientwidth - movelen - rightw - 10) + 'px';
            }
          }
          document.onmouseup = function (evt) {
            document.onmousemove = null;
            document.onmouseup = null; 
            resize[i].releasecapture && resize[i].releasecapture();
          }
          resize[i].setcapture && resize[i].setcapture();
          return false;
        }
      }
      for (let i = 0; i < resize2.length; i++) {
        resize2[i].onmousedown = function (e) {
          var startx = e.clientx;
          resize2[i].left = resize2[i].offsetleft;
          document.onmousemove = function (e) {
            var endx = e.clientx;
            var leftw = left[i].offsetwidth;
            var movelen = resize2[i].left + (endx - startx) - leftw;
            var maxt = box[i].clientwidth - resize2[i].offsetwidth - 5;
            if (movelen < 150) movelen = 150; 
            if (movelen > maxt - leftw - 150) movelen = maxt - leftw - 150;

            resize2[i].style.left = movelen;
            for (let j = 0; j < right.length; j++) {
              mid[j].style.width = movelen + 'px';
              right[j].style.width = (box[i].clientwidth - movelen - leftw - 10) + 'px';
            }
          }
          document.onmouseup = function (evt) {
            document.onmousemove = null;
            document.onmouseup = null; 
            resize2[i].releasecapture && resize2[i].releasecapture();
          }
          resize2[i].setcapture && resize2[i].setcapture();
          return false;
        }
      }
    }
  }
}
</script>

style部分

<style scoped>
ul,li{
  list-style: none;
  display: block;
  margin:0;
  padding:0;
}
.box{
  width:800px;
  height:32px;
  overflow:hidden;
}
.left{
  width:calc(30% - 10px);
  height:100%;  
  background:skyblue;
  float:left;
}

.resize{
  width:5px;
  height:100%;
  cursor: w-resize;
  float:left;
}

.resize2{
  width:5px;
  height:100%;
  cursor: w-resize;
  float:left;
}

.right{
  float:left;
  width:35%;
  height:100%;  
  background:tomato;
}
.mid{
  float:left;
  width:35%;
  height:100%;  
  background:#f00;
}
</style>