vue指令 实现drawer 拖拽调整大小

要实现drawer的拖拽调整大小，可以使用Vue的指令来监听鼠标事件，并根据鼠标位置计算出新的尺寸。

首先，在Vue组件内定义一个指令，用于绑定到drawer元素上：

Vue.directive('resizable', {
  bind(el, binding) {
    let startX, startY, startWidth, startHeight;

    // 监听鼠标按下事件
    el.addEventListener('mousedown', (e) => {
      startX = e.clientX;
      startY = e.clientY;
      startWidth = el.offsetWidth;
      startHeight = el.offsetHeight;

      // 监听鼠标移动事件
      document.addEventListener('mousemove', resize);
      // 监听鼠标松开事件
      document.addEventListener('mouseup', stopResize);
    });

    // 改变元素尺寸的函数
    function resize(e) {
      const width = startWidth + (e.clientX - startX);
      const height = startHeight + (e.clientY - startY);

      // 设置新的尺寸
      el.style.width = width + 'px';
      el.style.height = height + 'px';
    }

    // 停止调整尺寸的函数
    function stopResize() {
      document.removeEventListener('mousemove', resize);
      document.removeEventListener('mouseup', stopResize);
    }
  }
});

然后，在使用drawer的地方，将指令绑定到drawer元素上：

<template>
  <div>
    <div class="drawer" v-resizable>
      <!-- drawer的内容 -->
    </div>
  </div>
</template>

这样，当鼠标按下并拖拽drawer时，可以实时改变drawer的尺寸