ElementUI的Dialog弹窗实现全局命令拖拽移动功能

在ElementUI的Dialog组件中，可以通过自定义指令来实现弹窗的全局拖拽移动功能。以下是一个简单的Vue组件示例，展示了如何实现这个功能：

<template>
  <el-dialog
    title="拖动我"
    :visible.sync="dialogVisible"
    custom-class="moveable-dialog"
  >
    <p>这是一个可以拖动的对话框</p>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: true
    };
  },
  directives: {
    draggable: {
      bind(el) {
        let dragging = false;
        let startX, startY, transformX, transformY;
 
        el.onmousedown = (e) => {
          dragging = true;
          startX = e.clientX;
          startY = e.clientY;
          transformX = 0;
          transformY = 0;
 
          el.style.transition = 'unset';
        };
 
        window.onmousemove = (e) => {
          if (dragging) {
            const deltaX = e.clientX - startX;
            const deltaY = e.clientY - startY;
 
            transformX = deltaX;
            transformY = deltaY;
 
            el.style.transform = `translate(${transformX}px, ${transformY}px)`;
          }
        };
 
        window.onmouseup = () => {
          dragging = false;
          el.style.transition = '.3s all';
          el.style.transform = '';
        };
      }
    }
  }
};
</script>
 
<style>
.moveable-dialog {
  cursor: move !important; /* 更改鼠标形状为可拖动形状 */
  position: relative; /* 设置定位，使元素可以被transform移动 */
}
 
.moveable-dialog .el-dialog__header {
  -webkit-user-select: none; /* 禁止在拖动时选中文本 */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>

在这个示例中，我们定义了一个名为draggable的Vue自定义指令，它会绑定到el-dialog的根元素上。当用户在元素上按下鼠标并开始移动时，我们记录下开始位置，并在鼠标移动时更新元素的位置。当用户释放鼠标按钮时，结束拖动操作。这样就实现了一个简单的全局拖拽功能。