首先在utils下新建directives.js文件,利用vue的全局自定义指令注册弹框拖拽功能
directives.js
import Vue from 'vue'
// v-drag-modal: 弹窗拖拽
Vue.directive('drag-modal', (el, bindings, vnode) => {
Vue.nextTick(() => {
let { visible, destroyOnClose } = vnode.componentInstance
// 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁,指令被重复调用
if (!visible) return
let modal = el.getElementsByClassName('ant-modal')[0]
// elementui let modal = el.getElementsByClassName('el-dialog')[0]
let header = el.getElementsByClassName('ant-modal-header')[0]
// elementui let header = el.getElementsByClassName('el-dialog__header')[0]
let left = 0
let top = 0
// 未定义 destroyOnClose 时,dom未被销毁,关闭弹窗再次打开,弹窗会停留在上一次拖动的位置
if (!destroyOnClose) {
left = modal.left || 0
top = modal.top || 0
}
// top 初始值为 offsetTop
top = top || modal.offsetTop
// 点击title部分拖动
header.onmousedown = e => {
let startX = e.clientX
let startY = e.clientY
header.left = header.offsetLeft
header.top = header.offsetTop
el.onmousemove = event => {
let endX = event.clientX
let endY = event.clientY
modal.left = header.left + (endX - startX) + left
modal.top = header.top + (endY - startY) + top
modal.style.left = modal.left + 'px'
modal.style.top = modal.top + 'px'
}
el.onmouseup = event => {
left = modal.left
top = modal.top
el.onmousemove = null
el.onmouseup = null
header.releaseCapture && header.releaseCapture()
}
header.setCapture && header.setCapture()
}
// 点击表单部分拖动
// modal.onmousedown = e => {
// let startX = e.clientX
// let startY = e.clientY
// header.left = header.offsetLeft
// header.top = header.offsetTop
// el.onmousemove = event => {
// let endX = event.clientX
// let endY = event.clientY
// modal.left = header.left + (endX - startX) + left
// modal.top = header.top + (endY - startY) + top
// modal.style.left = modal.left + 'px'
// modal.style.top = modal.top + 'px'
// }
// el.onmouseup = event => {
// left = modal.left
// top = modal.top
// el.onmousemove = null
// el.onmouseup = null
// header.releaseCapture && header.releaseCapture()
// }
// header.setCapture && header.setCapture()
// }
})
})
然后再main.js文件引入 挂载到全局即可
main.js
// 自定义指令实现model框拖拽
import '@/utils/directives.js'
使用: 无论是antd-vue还是elementui使用时一定要加上 :destroyOnClose=“true” 确保每次弹框关闭都被销毁否则在下次打开弹框还是在上一次的位置
<a-modal
v-drag-modal
destroy-on-close
v-model:visible="visible"
title="Basic Modal"
@ok="handleOk" />