vue 指令实现弹窗拖拽和拉伸

在Vue中，可以通过自定义指令实现弹窗的拖拽和拉伸功能。

首先，对于拖拽功能，可以创建一个自定义指令`v-draggable`。在该指令的绑定元素上设置`mousedown`事件监听器，当鼠标按下时触发拖拽操作。在`mousemove`和`mouseup`事件监听器中处理鼠标移动和释放的逻辑。具体代码如下：

Vue.directive('draggable', {
  bind(el) {
    el.style.position = 'absolute';
    el.addEventListener('mousedown', startDrag);

    function startDrag(e) {
      const startX = e.clientX;
      const startY = e.clientY;
      const initialX = el.offsetLeft;
      const initialY = el.offsetTop;

      document.addEventListener('mousemove', dragElement);
      document.addEventListener('mouseup', releaseElement);

      function dragElement(e) {
        el.style.left = `${initialX + (e.clientX - startX)}px`;
        el.style.top = `${initialY + (e.clientY - startY)}px`;
      }

      function releaseElement() {
        document.removeEventListener('mousemove', dragElement);
        document.removeEventListener('mouseup', releaseElement);
      }
    }
  }
});

接下来，对于拉伸功能，可以创建一个自定义指令`v-resizable`。在该指令的绑定元素上设置`mousedown`事件监听器，当鼠标按下时触发拉伸操作。在`mousemove`和`mouseup`事件监听器中处理鼠标移动和释放的逻辑。具体代码如下：

Vue.directive('resizable', {
  bind(el) {
    el.style.position = 'absolute';
    el.style.resize = 'both';
    el.addEventListener('mousedown', startResize);

    function startResize(e) {
      const startX = e.clientX;
      const startY = e.clientY;
      const initialWidth = el.offsetWidth;
      const initialHeight = el.offsetHeight;

      document.addEventListener('mousemove', resizeElement);
      document.addEventListener('mouseup', releaseElement);

      function resizeElement(e) {
        el.style.width = `${initialWidth + (e.clientX - startX)}px`;
        el.style.height = `${initialHeight + (e.clientY - startY)}px`;
      }

      function releaseElement() {
        document.removeEventListener('mousemove', resizeElement);
        document.removeEventListener('mouseup', releaseElement);
      }
    }
  }
});

最后，在需要拖拽和拉伸的弹窗组件上使用`v-draggable`和`v-resizable`指令即可实现相应功能。例如：

<template>
  <div class="modal" v-draggable v-resizable>
    <!-- 弹窗内容 -->
  </div>
</template>

通过上述自定义指令的方式，我们可以在Vue中实现弹窗的拖拽和拉伸功能，提升用户体验。