vue3 +ts el-dialog 拖动

Vue3 结合 TypeScript 使用 Element Plus 的 `el-dialog` 组件添加拖动功能，你可以通过使用一些第三方库，比如 Vuedraggable 或者 Element Plus 自带的 draggable 功能来实现。下面是基本步骤：

1. 首先，在项目中安装所需的依赖项：

   npm install vuedraggable @element-plus/draggable

2. 在 Vue 文件中引入并配置 Vuedraggable 或者 Element Plus 的 draggable：

   import { ElDialog, Draggable } from 'element-plus';
   import draggable from 'vuedraggable';

   export default {
     components: {
       ElDialog,
       // 如果使用 Vuedraggable
       CustomDraggable: draggable({
         group: '__group__', // 设置同组可拖动
         /* 可选其他选项，如动画、放置回调等 */
       }),
     },
     methods: {
       openDraggableDialog() {
         const dialog = new ElDialog({
           visible: true,
           width: '400px',
           draggable: true, // 或者 CustomDraggable组件
         });
         this.$refs.dialog = dialog; // 将dialog绑定到ref上以便操作
       }
     },
   };

3. 在模板中使用 `<el-dialog>` 并应用 `draggable` 属性或自定义的 `CustomDraggable`：

   <template>
     <div>
       <button @click="openDraggableDialog">打开可拖动对话框</button>
       <el-dialog ref="dialog" :visible.sync="dialogVisible">
         <!-- 内容 -->
       </el-dialog>
     </div>
   </template>

4. 当你想要关闭对话框时，可以监听 `dragend` 事件或处理完拖放后手动调整状态。