vue 自定义指令动态改变元素

const drag = {
  // 元素已经存在
  mounted: function (el: HTMLElement, binding: any) {
    console.log('el', el);
    const dragDom = el;
    dragDom.style.cursor = 'e-resize';
    dragDom.onmousedown = (e: { clientX: number }) => {
      // 鼠标按下，计算当前元素距离可视区的距离，也就是距离屏幕最左边的距离
      console.log('e.clientX', e.clientX);
      const disX = e.clientX;
      const initialWidth = dragDom.clientWidth;
      const minW = 10;
      const maxW = 600;
      var nw;
      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离，随着鼠标不断移动， 鼠标的move 事件传回的 e.clientX 不断增大，于是，点击的初始位置减去 不断移动的距离，就等于，已经移动的距离
        const distance = e.clientX - disX;
        // 改变当前元素宽度，不可超过最小最大值
        nw = initialWidth + distance;
        nw = nw < minW ? minW : nw;
        nw = nw > maxW ? maxW : nw;
        dragDom.style.width = `${nw}px`;
      };

      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  }
};

export default drag;