Vue3 ElementUI 实现 el-dialog 窗口鼠标拖拽移动功能

实现 el-dialog 窗口的鼠标拖拽移动功能，可以通过以下步骤实现：

1. 在 el-dialog 组件上添加 ref 属性，例如：<el-dialog ref='dialog'>。
2. 在 el-dialog 组件上添加 mousedown 事件处理函数，例如：@mousedown='handleMouseDown'。
3. 在 Vue3 的 setup 函数中定义 handleMouseDown 事件处理函数，该函数会先获取 dialog 组件的引用，然后将其绑定到当前组件实例的 data 属性上，最后添加 document 的 mousemove 和 mouseup 事件监听：

setup() {
  const dialogRef = ref(null);
  const data = reactive({
    dialog: null,
    startX: 0,
    startY: 0,
    dialogLeft: 0,
    dialogTop: 0,
    dragging: false
  });

  const handleMouseDown = (e) => {
    data.dialog = dialogRef.value.$el.querySelector('.el-dialog__wrapper');
    data.startX = e.clientX;
    data.startY = e.clientY;
    data.dialogLeft = data.dialog.offsetLeft;
    data.dialogTop = data.dialog.offsetTop;
    data.dragging = true;
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  const handleMouseMove = (e) => {
    if (data.dragging) {
      const deltaX = e.clientX - data.startX;
      const deltaY = e.clientY - data.startY;
      data.dialog.style.left = `${data.dialogLeft + deltaX}px`;
      data.dialog.style.top = `${data.dialogTop + deltaY}px`;
    }
  };

  const handleMouseUp = () => {
    data.dragging = false;
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  };

  return {
    dialogRef,
    handleMouseDown
  };
}

完整代码如下：

<template>
  <el-dialog ref='dialog' :visible='dialogVisible' title='Dialog Title'>
    <span>Dialog Content</span>
  </el-dialog>
</template>

<script>
import { ref, reactive } from 'vue';
import { ElDialog } from 'element-plus';

export default {
  components: {
    ElDialog
  },
  setup() {
    const dialogRef = ref(null);
    const data = reactive({
      dialog: null,
      startX: 0,
      startY: 0,
      dialogLeft: 0,
      dialogTop: 0,
      dragging: false
    });

    const handleMouseDown = (e) => {
      data.dialog = dialogRef.value.$el.querySelector('.el-dialog__wrapper');
      data.startX = e.clientX;
      data.startY = e.clientY;
      data.dialogLeft = data.dialog.offsetLeft;
      data.dialogTop = data.dialog.offsetTop;
      data.dragging = true;
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    };

    const handleMouseMove = (e) => {
      if (data.dragging) {
        const deltaX = e.clientX - data.startX;
        const deltaY = e.clientY - data.startY;
        data.dialog.style.left = `${data.dialogLeft + deltaX}px`;
        data.dialog.style.top = `${data.dialogTop + deltaY}px`;
      }
    };

    const handleMouseUp = () => {
      data.dragging = false;
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };

    return {
      dialogRef,
      handleMouseDown
    };
  }
}