基于ElementUI+Vue3框架对el-dialog窗口实现拖拽移动的功能注意使用的是Vue3

在Vue3中，我们可以使用Composition API来实现el-dialog窗口的拖拽移动功能。具体步骤如下：

1. 在setup函数中使用ref创建一个dragging变量，用于标记当前是否正在拖拽窗口。

setup() {
  const dragging = ref(false);

  // ...
}

2. 在el-dialog的title部分添加mousedown和mousemove事件监听。

<el-dialog
  :visible.sync="dialogVisible"
  :title="dialogTitle"
  @close="handleCloseDialog"
>
  <div
    class="dialog-title"
    @mousedown="handleMouseDown"
    @mousemove="handleMouseMove"
    @mouseup="handleMouseUp"
  >
    {{ dialogTitle }}
  </div>

  <!-- ... -->
</el-dialog>

3. 在事件监听函数中实现拖拽窗口的逻辑。

function handleMouseDown(event) {
  dragging.value = true;
  offsetX.value = event.clientX - dialogLeft.value;
  offsetY.value = event.clientY - dialogTop.value;
}

function handleMouseMove(event) {
  if (dragging.value) {
    dialogLeft.value = event.clientX - offsetX.value;
    dialogTop.value = event.clientY - offsetY.value;
  }
}

function handleMouseUp() {
  dragging.value = false;
}

4. 在style中设置对话框的position为absolute，并使用v-bind绑定left和top样式。

<el-dialog
  :visible.sync="dialogVisible"
  :title="dialogTitle"
  :style="{ position: 'absolute', left: dialogLeft + 'px', top: dialogTop + 'px' }"
  @close="handleCloseDialog"
>
  <!-- ... -->
</el-dialog>

完整代码示例：

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="dialogTitle"
    :style="{ position: 'absolute', left: dialogLeft + 'px', top: dialogTop + 'px' }"
    @close="handleCloseDialog"
  >
    <div
      class="dialog-title"
      @mousedown="handleMouseDown"
      @mousemove="handleMouseMove"
      @mouseup="handleMouseUp"
    >
      {{ dialogTitle }}
    </div>
    <div class="dialog-content">
      {{ dialogContent }}
    </div>
  </el-dialog>
</template>

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

export default {
  components: { ElDialog },
  setup() {
    const dialogVisible = ref(false);
    const dialogTitle = ref('Dialog Title');
    const dialogContent = ref('Dialog Content');
    const dragging = ref(false);
    const dialogLeft = ref(0);
    const dialogTop = ref(0);
    const offsetX = ref(0);
    const offsetY = ref(0);

    function handleCloseDialog() {
      dialogVisible.value = false;
    }

    function handleMouseDown(event) {
      dragging.value = true;
      offsetX.value = event.clientX - dialogLeft.value;
      offsetY.value = event.clientY - dialogTop.value;
    }

    function handleMouseMove(event) {
      if (dragging.value) {
        dialogLeft.value = event.clientX - offsetX.value;
        dialogTop.value = event.clientY - offsetY.value;
      }
    }

    function handleMouseUp() {
      dragging.value = false;
    }

    return {
      dialogVisible,
      dialogTitle,
      dialogContent,
      dragging,
      dialogLeft,
      dialogTop,
      offsetX,
      offsetY,
      handleCloseDialog,
      handleMouseDown,
      handleMouseMove,
      handleMouseUp,
    };
  },
};
</script>

<style>
.dialog-title {
  cursor: move;
  padding: 10px;
}

.dialog-content {
  padding: 20px;
}
</style>