方式一:通过插件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 组件提供了拖拽和调整大小的功能。

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

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

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

方式二:通过自定义指令实现拖拽功能
要通过自定义指令来实现 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
      }
    }
  }
})
  1. 在你的 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>
  1. 使用 v-drag 指令将弹窗元素(.ant-modal)与自定义拖拽指令进行绑定。

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

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

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐