vue+ant 弹窗可以拖动

通过自定义指令实现拖拽功能

在main.js里加入drag自定义指令

我自己测试时发现modal不管如何设置宽度，居中等，他的初始的left都为0，如果不设置好，容易出现点击后刚开始移动弹窗会偏移一段距离。

Vue.directive('drag', {bind(el) {// 获取弹窗头部const header = el.querySelector('.ant-modal-header')const modal = el.querySelector('.ant-modal')// 弹窗头部鼠标变为移动header.style.cursor = 'move'// 头部鼠标按下header.onmousedown = er => {// 得到初始位置// 初始位置left是0，top是modal的offsetTopconst xx = modal.style.left ? parseInt(modal.style.left.slice(0, -2)) : 0const yy = modal.style.top ? parseInt(modal.style.top.slice(0, -2)) : modal.offsetTopconst disX = er.clientX - xxconst disY = er.clientY - yydocument.onmousemove = e => {//距离 为 移动的位置-初始位置const left = e.clientX - disXconst top = e.clientY - disY// 设置整个弹窗的距左距右位置modal.style.left = left + 'px'modal.style.top = top + 'px'}document.onmouseup = () => {document.onmousemove = nulldocument.onmouseup = null}}}
})

 在modal使用了centered时会出现移动的一瞬间弹窗偏移严重的问题，而且弹窗上下居中的class名字在这里拿不到，所以只能再建一个dragcenter自定义指令。

// 自定义代码实现弹窗拖动效果  modal居中时
Vue.directive('dragcenter', {bind(el) {// ant-modal-centered在这里取不到// const centered = el.querySelector('ant-modal-centered')// console.log('centered', centered)// 获取弹窗头部const header = el.querySelector('.ant-modal-header')const modal = el.querySelector('.ant-modal')// 弹窗头部鼠标变为移动header.style.cursor = 'move'// 头部鼠标按下header.onmousedown = er => {// 得到初始位置// 居中的话 初始位置为0或已经移动过的位置const disX = modal.style.left ? parseInt(modal.style.left.slice(0, -2)) : 0const disY = modal.style.top ? parseInt(modal.style.top.slice(0, -2)) : 0document.onmousemove = e => {//距离 为 移动的位置-初始位置const left = disX + e.clientX - er.clientXconst top = disY + e.clientY - er.clientY// 设置整个弹窗的距左距右位置modal.style.left = left + 'px'modal.style.top = top + 'px'}document.onmouseup = () => {document.onmousemove = nulldocument.onmouseup = null}}}
})

使用时modal未使用centered则用v-drag，使用centered时则用v-dragcenter。