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(() => {// 内容同上 ...})}},}