vue3项目里antd的modal框怎么实现鼠标拖动

在 Vue3 项目中使用 Ant Design 的 Modal 组件进行拖动，可以借助 `vue-draggable-resizable` 库来实现。这个库提供了拖动和调整大小的功能，非常适合用于实现可调整大小的模态框。

首先，安装 `vue-draggable-resizable`：

npm install vue-draggable-resizable --save

然后，在需要使用 Modal 的组件中引入 `vue-draggable-resizable` 和 `antd`：

<template>
  <vue-draggable-resizable :w="modalWidth" :h="modalHeight">
    <a-modal>
      <!-- Modal 内容 -->
    </a-modal>
  </vue-draggable-resizable>
</template>

<script>
import { Modal } from 'ant-design-vue';
import VueDraggableResizable from 'vue-draggable-resizable';

export default {
  components: {
    Modal,
    VueDraggableResizable,
  },
  data() {
    return {
      modalWidth: 600, // Modal 宽度
      modalHeight: 400, // Modal 高度
    };
  },
};
</script>

在上面这个示例中，我们首先引入了 `antd` 和 `vue-draggable-resizable`，然后定义了一个组件，并将 `Modal` 组件包裹在 `vue-draggable-resizable` 组件中，这样就可以实现拖动和调整大小的功能了。在 `data` 中定义了 `modalWidth` 和 `modalHeight` 两个变量，用于控制 Modal 的宽度和高度。

最后在 `a-modal` 标签中添加 Modal 的内容即可。需要注意的是，在 Vue3 中，我们需要使用 `a-modal` 标签来代替 `Modal` 组件，否则会出现编译错误。