js实现可伸缩框属性

借鉴地址：https://blog.csdn.net/xiaowu_hhb/article/details/52809328

1.设置拉伸盒子的id=“shrinkBox”

<el-col
          :span="5"
          class="zTree_custom"
          id="shrinkBox"
        >

2.在生命周期里mounted调用：（页面挂载完）

mounted() {
    // 树菜单  拉伸
    let oBox = document.getElementById("shrinkBox");
    oBox.style.cursor = "w-resize";
    let a = 0;
    let b = 0;
    let X, Y, oBoxW, oBoxH, oBoxL;
    // 鼠标按下
    oBox.onmousedown = function(ev) {
      var oEvent = ev || event;
      X = oEvent.clientX;
      Y = oEvent.clientY;
      oBoxW = oBox.offsetWidth;
      oBoxH = oBox.offsetHeight;
      oBoxL = oBox.offsetLeft;
      if (X > oBox.offsetLeft + oBox.offsetWidth - 5) {
        a = "right";
      } else if (Y > oBox.offsetTop + oBoxH - 5) {
        a = "bottom";
      } else if (X < oBox.offsetLeft + 5) {
        a = "left";
      }
      // 鼠标移动
      document.onmousemove = function(ev) {
        // oBox.style.cursor = "w-resize";
        var oEvent = ev || event;
        var XX = oEvent.clientX;
        var YY = oEvent.clientY;
        if (a == "right") {
          oBox.style.width = oBoxW + (XX - X) + "px";
        } else if (a == "bottom") {
          oBox.style.height = oBoxH + (YY - Y) + "px";
        } else if (a == "left") {
          oBox.style.width = oBoxW + (X - XX) + "px";
          oBox.style.left = XX - X + oBoxL - 5 + "px";
        }
      };
      // 鼠标移开
      document.onmouseup = function() {
        document.onmousedown = null;
        document.onmousemove = null;
      };
    };
  },

3.注意事项：（坑）
（1）一定要在页面mounted调用，才能获取到dom元素，拉伸盒子元素；
（2）鼠标移动事件和鼠标移开事件必须放在鼠标点击事件里面，每次鼠标移开得清空鼠标点击事件和移动事件：
（3）拉伸拉伸 ，顾名思义，不能只放大不缩小，既得往左移又得往右移。