vue实现左右两栏布局宽度可拖拽

项目里需要左右两栏布局根据内容多少可以用户自己拖拽宽度的需求

找了文章参考了下，但都没有实现我要的效果，所以结合调整了一下，记录一下我自己用到的效果
参考文章放下面了，感谢两位大佬

vue拖拽

html实现拖拽

最终效果实现如下：鼠标左右拖动中间滚动条可以改变左右两边的宽度

代码如下

<template>
  <div class="box" id="box" ref="box">
    <div class="left" id="left">左侧div内容</div>
    <div class="resize" id="resize" title="收缩侧边栏">⋮</div>
    <div class="right" id="right">右侧div内容</div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.dragControllerDiv();
  },
  methods: {
    dragControllerDiv() {
      let resize = document.getElementById("resize");
      let left = document.getElementById("left");
      let right = document.getElementById("right");
      let box = document.getElementById("box");

      // 鼠标按下事件
      resize.onmousedown = function (e) {
        // 记录坐标起始位置
        let startX = e.clientX;

        // 左边元素起始宽度
        resize.left = left.offsetWidth;
        console.log("宽度：", resize.left);
        // 鼠标拖动事件
        document.onmousemove = function (e) {
          // 鼠标拖动的终止位置
          let endX = e.clientX;

          // （endx-startx）= 移动的距离
          //  resize.left + 移动的距离 = 左边区域最后的宽度
          let moveLen = resize.left + (endX - startX);
          console.log(moveLen);

          // 左右两边区域的总宽度 = 大容器宽度 - 中间区域拖拉框的宽度
          let maxWidth = box.clientWidth - resize.offsetWidth;

          // 限制左边区域的最小宽度为30px
          if (moveLen < 30) moveLen = 30;

          // 右边区域最小宽度为 150px 限制左边区域到150后不能再拉宽
          if (moveLen > maxWidth - 420) moveLen = maxWidth - 420;

          // 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应
          console.log((moveLen / maxWidth) * 100);
          // left.style.width =(moveLen / maxWidth * 100) + '%';
          left.style.width = moveLen + "px";

          // 右边区域即是总大小 - 左边宽度 - 拖动条宽度
          console.log(((maxWidth - moveLen) / maxWidth) * 100);
          right.style.width = maxWidth - moveLen + "px";
          console.log(moveLen);
        };
        // 鼠标松开事件
        document.onmouseup = function (evt) {
          console.log(11);
          document.onmousemove = null;
          document.onmouseup = null;
          resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
        };
        resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
        return false;
      };
    },
  },
};
</script>
<style lang="scss" scoped>
/* 拖拽相关样式 */
.box {
  width: 100%;
  height: 100%;
  margin: 1% 0px;
  overflow: hidden;
  box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
}
/*左侧div样式*/
.left {
  width: calc(50% - 10px); /*左侧初始化宽度*/
  height: 100%;
  background: red;
  float: left;
}
/*拖拽区div样式*/
.resize {
  cursor: col-resize;
  float: left;
  position: relative;
  top: 45%;
  background-color: #d6d6d6;
  border-radius: 5px;
  margin-top: -10px;
  width: 10px;
  height: 50px;
  background-size: cover;
  background-position: center;
  /*z-index: 99999;*/
  font-size: 32px;
  color: white;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {
  color: #444444;
}
/*右侧div'样式*/
.right {
  float: left;
  width: 50%; /*右侧初始化宽度*/
  height: 100%;
  background: blue;
  box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
}
</style>