drag.js

export default {install(Vue) {// v-dialogDrag: 弹窗拖拽Vue.directive('dragModal', (el, bindings, vnode) => {Vue.nextTick(() => {const { visible, destroyOnClose } = vnode.componentInstance// 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁，指令被重复调用if (!visible) returnconst modal = el.getElementsByClassName('ant-modal')[0]const header = el.getElementsByClassName('ant-modal-header')[0]let left = 0let top = 0header.style.cursor = 'move'// 未定义 destroyOnClose 时，dom未被销毁，关闭弹窗再次打开，弹窗会停留在上一次拖动的位置if (!destroyOnClose) {left = modal.left || 0top = modal.top || 0}// top 初始值为 offsetToptop = top || modal.offsetTopheader.onmousedown = e => {const startX = e.clientXconst startY = e.clientYheader.left = header.offsetLeftheader.top = header.offsetTopel.onmousemove = event => {const endX = event.clientXconst endY = event.clientYmodal.left = header.left + (endX - startX) + leftmodal.top = header.top + (endY - startY) + topmodal.style.left = modal.left + 'px'modal.style.top = modal.top + 'px'}el.onmouseup = event => {left = modal.lefttop = modal.topel.onmousemove = nullel.onmouseup = nullheader.releaseCapture && header.releaseCapture()}header.setCapture && header.setCapture()}})})}
}

main.js引入

import '@/utils/drag'

使用v-dragModal

   <a-modalv-dragModal:title="editModal.modalTitle + '详情'":visible="editModal.visible"destroy-on-close:footer="null":width="1200"@cancel="editModal.visible = false"><div  style="height: 500px">1</div></a-modal>