vue3+element plus+typescript实现el-dialog弹框拖拽并添加详细注释，要是公共方法，其他多个组件可以调用

好的，下面为您提供一份实现el-dialog弹框拖拽的代码，包含详细注释，并且可以作为公共方法供其他组件调用。

首先，我们先创建一个mixin，命名为`dialogDragMixin.ts`，在该文件中实现弹框拖拽的功能。

import { DirectiveBinding } from 'vue';
import { ElDialog } from 'element-plus';

// 定义接口，用于存储弹框的位置信息
interface DialogPosition {
  top: number;
  left: number;
}

// 定义一个变量，用于存储弹框的位置信息
let dialogPosition: DialogPosition = {
  top: 0,
  left: 0
};

export default {
  // 指令钩子函数，当元素插入到 DOM 中时执行
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    // 获取el-dialog组件实例对象
    const dialog: ElDialog = binding.instance.$parent as ElDialog;
    // 获取弹框的标题栏元素
    const dialogHeaderEl: HTMLElement = el.querySelector('.el-dialog__header')!;
    // 设置标题栏的样式，使其可以被拖拽
    dialogHeaderEl.style.cursor = 'move';
    dialogHeaderEl.style.userSelect = 'none';

    // 鼠标按下事件处理函数
    const handleMouseDown = (event: MouseEvent) => {
      // 记录鼠标按下时的位置信息
      dialogPosition.top = dialog.$el.offsetTop;
      dialogPosition.left = dialog.$el.offsetLeft;
      // 记录鼠标按下时的坐标信息
      const mouseX = event.clientX;
      const mouseY = event.clientY;

      // 鼠标移动事件处理函数
      const handleMouseMove = (event: MouseEvent) => {
        // 计算鼠标移动时的偏移量
        const offsetX = event.clientX - mouseX;
        const offsetY = event.clientY - mouseY;
        // 更新弹框的位置信息
        dialog.$el.style.top = dialogPosition.top + offsetY + 'px';
        dialog.$el.style.left = dialogPosition.left + offsetX + 'px';
      };

      // 鼠标抬起事件处理函数
      const handleMouseUp = () => {
        // 移除鼠标移动事件处理函数和鼠标抬起事件处理函数
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
      };

      // 添加鼠标移动事件处理函数和鼠标抬起事件处理函数
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    };

    // 添加鼠标按下事件处理函数
    dialogHeaderEl.addEventListener('mousedown', handleMouseDown);
  }
}

接下来，我们在需要使用该mixin的组件中引入它，并将其添加到`mixins`属性中即可。

<template>
  <el-dialog
    title="Dialog Title"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
    v-dialogDrag
  >
    <span>Dialog Content</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">Cancel</el-button>
      <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import dialogDragMixin from './dialogDragMixin';

export default defineComponent({
  name: 'MyComponent',
  mixins: [dialogDragMixin],
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done: () => void) {
      this.$confirm('Confirm to close this dialog?')
        .then(() => {
          done();
        })
        .catch(() => {});
    }
  }
});
</script>

最后，我们可以将`dialogDragMixin`作为一个公共方法，供其他多个组件调用。在`main.ts`中，全局注册该mixin即可。

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import dialogDragMixin from './dialogDragMixin';

const app = createApp(App);

// 注册全局mixin
app.mixin(dialogDragMixin);

app.use(ElementPlus).mount('#app');