modal bullet box
Use vue custom instructions to operate the top and left of the modal bullet box. Define the
instruction name as drag-modal, and define it globally in main.js
/*定义a-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]
let header = el.getElementsByClassName('ant-modal-header')[0]
let left = 0
let top = 0
// 未定义 destroyOnClose 时，dom未被销毁，关闭弹窗再次打开，弹窗会停留在上一次拖动的位置
if (!destroyOnClose) {
left = modal.left || 0
top = modal.top || 0
}
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;
//屏幕边界X
const screenX = (document.body.offsetWidth + 17 - modal.offsetWidth) / 2
//屏幕边界Y
const screenY = (document.body.offsetHeight - modal.offsetHeight) / 2
//判断拖拽是否超出屏幕 X
if (Math.abs(modal.left) > screenX) {
if (modal.left < 0) {
modal.style.left = -screenX + 'px'
}
if (modal.left > 0) {
modal.style.left = screenX + 'px'
}
} else {
modal.style.left = modal.left + 'px'
}
//判断拖拽是否超出屏幕 Y
if (Math.abs(modal.top) > screenY) {
if (modal.top < 0) {
modal.style.top = -screenY + 'px'
}
if (modal.top > 0) {
modal.style.top = screenY + 'px'
}
} else {
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();
return false
}
})
})
Use: Be sure to add: destroyOnClose="true" to ensure that every time the pop-up frame is closed, it will be destroyed, otherwise it will still be at the previous position when the pop-up frame is opened next time
<a-modal
v-drag-modal
v-model="visible"
title="拖拽弹框"
:centered="true"
:destroyOnClose="true"
:maskClosable="false"
ok-text="保存"
cancel-text="取消"
@ok="okModal"
:width="750"
>
</a-modal>