antd vue 的 modal 组件 自定义可拖拽指令

antd vue 的 modal 组件 自定义可拖拽指令

antd vue 的 a-modal 不可拖拽，定义一个vue指令，使用户可以通过头部拖拽弹窗，内容区不可拖拽

chrome 浏览器

效果演示

调用示例

<a-modal v-drag-modal title="弹窗" v-model="isShow">...</a-modal>

指令代码

可以在main.js中定义（全局可用）

Vue.directive('drag-modal', (el, bindings, vnode) => {Vue.nextTick(() => {let {visible, destroyOnClose } = ponentInstance// 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁，指令被重复调用if (!visible) returnlet modal = el.getElementsByClassName('ant-modal')[0]let header = el.getElementsByClassName('ant-modal-header')[0]let left = 0let top = 0// 未定义 destroyOnClose 时，dom未被销毁，关闭弹窗再次打开，弹窗会停留在上一次拖动的位置if (!destroyOnClose) {left = modal.left || 0top = modal.top || 0}// top 初始值为 offsetToptop = top || modal.offsetTopheader.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.lefttop = modal.topel.onmousemove = null;el.onmouseup = null; header.releaseCapture && header.releaseCapture();}header.setCapture && header.setCapture();} })})

或者是在当前vue实例中定义 （当前页面可用）

import Vue from 'vue'export default {data(){return {...}},directives: {'drag-modal'(el, bindings, vnode){Vue.nextTick(() => {// 内容同上 ...})}},}