Vue3 + Ant Design Vue 实现 Modal 对话框拖拽+缩放指令

在 Vue3 和 Ant Design Vue 中，你可以通过自定义指令来实现 Modal 对话框的拖拽和缩放功能。自定义指令允许你在 Vue 组件上添加新的行为或属性。下面是一个简单的示例，展示了如何创建这样的自定义指令。
首先，我们需要创建一个自定义指令。在你的 Vue3 项目中，打开终端并输入以下命令创建一个名为 draggable-resizable 的自定义指令：

vue add directive-draggable-resizable

这将在你的项目中创建一个名为 directives 的新文件夹，并在其中生成一个名为 draggable-resizable.js 的文件。
打开 directives/draggable-resizable.js 文件，你会看到以下代码：

import { Directive } from 'vue';
const DraggableResizableDirective: Directive = {
beforeMount(el, binding) {
// 在这里添加你的拖拽和缩放逻辑
},
};
export default DraggableResizableDirective;

在这个文件中，你需要实现拖拽和缩放的功能。首先，我们需要使用一些第三方库来帮助我们实现这些功能。在这个例子中，我们将使用 sortablejs 和 resizable。你可以使用以下命令来安装这些库：

npm install sortablejs resizablejs --save

安装完成后，你可以在 directives/draggable-resizable.js 文件中引入这些库：

import Sortable from 'sortablejs';
import resizable from 'resizable';

接下来，我们可以在 beforeMount 钩子函数中添加拖拽和缩放的逻辑：

const DraggableResizableDirective: Directive = {
beforeMount(el, binding) {
const options = binding.value || {}; // 获取指令的绑定值，默认为空对象
const container = document.querySelector(options.container || 'body'); // 获取容器的选择器，默认为 body 元素
const resizableOptions = options.resizable || {}; // 获取可调整大小的配置选项，默认为空对象
const sortableOptions = options.sortable || {}; // 获取可排序的配置选项，默认为空对象
// 初始化 resizable
resizable(el, resizableOptions);
// 初始化 sortable
Sortable.create(container, sortableOptions);
},
};

在这个代码中，我们首先从绑定值中获取配置选项。然后，我们选择一个容器元素，并使用 resizable 和 Sortable.create 方法来初始化拖拽和缩放功能。你可以根据你的需求调整这些选项。例如，你可以在 options 对象中添加更多的配置选项来自定义拖拽和缩放的行为。
最后，确保在 directives/index.js 文件中注册这个自定义指令：

import DraggableResizableDirective from './draggable-resizable';
export default DraggableResizableDirective;