antd+vue弹窗实现拖拽功能

方式一：通过插件vue-draggable-resizable实现
在 Ant Design Vue 中实现弹窗的拖拽功能可以通过添加一些自定义代码来实现。以下是一个简单的示例，展示了如何结合 Ant Design Vue 和拖拽库 vue-draggable-resizable 实现可拖拽的弹窗：

首先，确保你已经安装了 vue-draggable-resizable。

npm install vue-draggable-resizable

然后，在你的 Vue 组件中，按照以下方式编写代码：

<template>
  <div>
    <a-button type="primary" @click="showModal">打开弹窗</a-button>
    <a-modal v-model:visible="visible" :title="title" @ok="handleOk" @cancel="handleCancel">
      <vue-draggable-resizable :parent="true">
        <!-- 在这里放入弹窗的内容 -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </vue-draggable-resizable>
    </a-modal>
  </div>
</template>

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

export default {
  components: {
    'a-modal': Modal,
    VueDraggableResizable
  },
  data() {
    return {
      visible: false,
      title: '可拖拽的弹窗'
    }
  },
  methods: {
    showModal() {
      this.visible = true
    },
    handleOk() {
      // 处理弹窗确定按钮的逻辑
      this.visible = false
    },
    handleCancel() {
      // 处理弹窗取消按钮的逻辑
      this.visible = false
    }
  }
}
</script>

上面的代码中，我们使用了 Modal 组件来创建弹窗，并在弹窗内部嵌套了 vue-draggable-resizable 组件。vue-draggable-resizable 组件提供了拖拽和调整大小的功能。

你可以根据需要自定义弹窗的样式和内容，以及在 handleOk 和 handleCancel 方法中添加适当的逻辑来处理按钮的点击事件。

请注意，上述只是一个简单的示例，你还可以根据实际需求进行更多自定义和扩展。另外，如果你想添加更高级的拖拽功能，你可能需要使用其他拖拽库或自行编写代码来实现。

=======================================================

方式二：通过自定义指令实现拖拽功能
要通过自定义指令来实现 Ant Design Vue 弹窗的拖拽功能，你可以按照以下步骤进行操作：

1. 首先，在你的项目中创建一个名为 drag 的自定义指令：

// main.js
import Vue from 'vue'

Vue.directive('drag', {
  bind(el, binding, vnode) {
    let dialogHeader = el.querySelector('.ant-modal-header')
    let dialog = el.querySelector('.ant-modal')

    dialogHeader.style.cursor = 'move'

    dialogHeader.onmousedown = (e) => {
      let disX = e.clientX - dialog.offsetLeft
      let disY = e.clientY - dialog.offsetTop

      document.onmousemove = (e) => {
        let left = e.clientX - disX
        let top = e.clientY - disY

        dialog.style.left = left + 'px'
        dialog.style.top = top + 'px'
      }

      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

2. 在你的 Vue 组件中使用自定义指令：

<template>
  <div>
    <a-button type="primary" @click="showModal">打开弹窗</a-button>
    <a-modal v-drag v-model:visible="visible" :title="title" @ok="handleOk" @cancel="handleCancel">
      <!-- 在这里放入弹窗的内容 -->
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </a-modal>
  </div>
</template>

<script>
import { Modal } from 'ant-design-vue'

export default {
  directives: {
    drag: {
      inserted(el, binding, vnode) {
        // 在此处可以对指令进行一些初始化设置
      }
    }
  },
  components: {
    'a-modal': Modal
  },
  // ...
}
</script>

3. 使用 v-drag 指令将弹窗元素（.ant-modal）与自定义拖拽指令进行绑定。

现在，当你打开弹窗时，你将能够通过拖动 dialogHeader 元素来拖动整个弹窗。

请注意，这只是一个简单的示例，仅实现了最基本的拖拽功能。你可以根据你的实际需求自定义自己的指令，并在其中添加更多的拖拽逻辑和样式。

另外，如果你使用的是 TypeScript，记得在 Vue 组件中添加指令的类型声明。