vue中实现拖动调整左右两侧div的宽度

<template>
  <div class='box'>
    <div class='left' />
    <div class='resize' title='收缩侧边栏'>⋮</div>
    <div class='mid' />
  </div>
</template>

<script>
export default {
  mounted() {
    this.dragControllerDiv();
  },
  methods: {
    dragControllerDiv: function() {
      const resize = document.getElementsByClassName('resize')[0];
      const left = document.getElementsByClassName('left')[0];
      const mid = document.getElementsByClassName('mid')[0];
      const box = document.getElementsByClassName('box')[0];
      // 鼠标按下事件
      resize.onmousedown = function(e) {
        const startX = e.clientX;
        const resizeLeft = resize.offsetLeft;
        // 鼠标拖动事件
        document.onmousemove = function(e) {
          const moveX = e.clientX;
          let moveLen = resizeLeft + (moveX - startX);
          const maxT = box.clientWidth - resize.offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
          moveLen = moveLen < 32 ? 32 : moveLen; //左边区域最小宽度为32px
          moveLen = moveLen > (maxT - 150) ? maxT - 150 : moveLen; //右边区域最小宽度为150px
          left.style.width = moveLen + 'px';
          mid.style.left = moveLen + 'px';
          resize.style.left = (moveLen - 5) + 'px';
        };
        // 鼠标松开事件
        document.onmouseup = function() {
          document.onmousemove = null;
          document.onmouseup = null;
        };
        return false;
      };
    }
  }
};
</script>

<style scoped>
/*左侧div样式*/
.left {
  position: absolute;
  width: 200px;
  left: 0;
  top: 55px;
  bottom: 0;
  background: palevioletred;
}

/*拖拽区div样式*/
.resize {
  cursor: col-resize;
  position: absolute;
  left: 195px;
  top: calc(50% - 23px);
  line-height: 100px;
  text-align: center;
  background: #666666;
  border-radius: 5px;
  width: 10px;
  z-index: 1;
}

/*拖拽区鼠标悬停样式*/
.resize:hover {
  background: #333333;
}

/*右侧div'样式*/
.mid {
  position: absolute;
  left: 200px;
  right: 0;
  top: 55px;
  bottom: 0;
  background: peru;
}
</style>

image.png
image.png