vue+element弹出框设置可以上下左右拉伸，移动，双击放大效果

**在网上找了很多，移到项目后总不满意，然后结合着自己改了一个。

直接放注册指令代码，需要自己生成一个js文件放进去，并在main.js里面引入

```javascript
// 注册自定义指令
Vue.directive('dialogDragResize', {
  bind(el) {
    // 获取弹窗头部（用于拖动）
    const dialogHeaderEl = el.querySelector('.el-dialog__header');
    const dragDom = el.querySelector('.el-dialog');

    // 设置样式
    dragDom.style.position = 'absolute';
    dragDom.style.cursor = 'default';

    // 初始化参数
    const minWidth = 400;
    const minHeight = 300;
    let isDragging = false;

    // 拖动事件
    const onDragMouseDown = (e) => {
      const startX = e.clientX;
      const startY = e.clientY;
      const startLeft = dragDom.offsetLeft;
      const startTop = dragDom.offsetTop;

      const onMouseMove = (moveEvent) => {
        const deltaX = moveEvent.clientX - startX;
        const deltaY = moveEvent.clientY - startY;
        dragDom.style.left = `${startLeft + deltaX}px`;
        dragDom.style.top = `${startTop + deltaY}px`;
      };

      const onMouseUp = () => {
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
      };

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    };

    dialogHeaderEl.style.cursor = 'move';
    dialogHeaderEl.addEventListener('mousedown', onDragMouseDown);

    // 拉伸事件
    const onResizeMouseDown = (e, direction) => {
      e.stopPropagation();
      isDragging = true;

      const startX = e.clientX;
      const startY = e.clientY;
      const startWidth = dragDom.offsetWidth;
      const startHeight = dragDom.offsetHeight;
      const startLeft = dragDom.offsetLeft;

      const onMouseMove = (moveEvent) => {
        const deltaX = moveEvent.clientX - startX;
        const deltaY = moveEvent.clientY - startY;

        if (direction.includes('right')) {
          const newWidth = Math.max(startWidth + deltaX, minWidth);
          dragDom.style.width = `${newWidth}px`;
        }

        if (direction.includes('left')) {
          const newWidth = Math.max(startWidth - deltaX, minWidth);
          dragDom.style.width = `${newWidth}px`;
          dragDom.style.left = `${startLeft + deltaX}px`;
        }

        if (direction.includes('bottom')) {
          const newHeight = Math.max(startHeight + deltaY, minHeight);
          dragDom.style.height = `${newHeight}px`;
        }

        if (direction.includes('top')) {
          const newHeight = Math.max(startHeight - deltaY, minHeight);
          dragDom.style.height = `${newHeight}px`;
          dragDom.style.top = `${dragDom.offsetTop + deltaY}px`;
        }
      };

      const onMouseUp = () => {
        isDragging = false;
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
      };

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    };

    // 创建拖拽区域
    const createHandle = (direction) => {
      const handle = document.createElement('div');
      handle.className = `drag-handle ${direction}`;
      handle.style.position = 'absolute';
      handle.style.width = direction.includes('left') || direction.includes('right') ? '10px' : '100%';
      handle.style.height = direction.includes('top') || direction.includes('bottom') ? '10px' : '100%';
      handle.style.cursor = `${direction}-resize`;

      if (direction.includes('top')) handle.style.top = '0';
      if (direction.includes('bottom')) handle.style.bottom = '0';
      if (direction.includes('left')) handle.style.left = '0';
      if (direction.includes('right')) handle.style.right = '0';

      handle.addEventListener('mousedown', (e) => onResizeMouseDown(e, direction));
      dragDom.appendChild(handle);
    };

    ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'].forEach(createHandle);
  },
});

使用的时候记得这里设置:close-on-click-modal=“false”，避免影响

<div v-dialog-drag-resize>
  <div class="el-dialog__header">弹窗头部</div>
  <div class="el-dialog">弹窗内容</div>
</div>