学习笔记----ant_vue模态框拖拽记录

通过自定义命令

• utils文件夹中新建dragModal.js

• import Vue from 'vue'  // 注册自定义拖拽指令，弥补 modal 组件不能拖动的缺陷 Vue.directive('drag-modal', (el, bindings, vnode) => {   Vue.nextTick(() => {     const { visible, destroyOnClose } = vnode.componentInstance     // 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁，指令被重复调用     if (!visible) return     //找到模态框的dom     const modal = el.getElementsByClassName('ant-modal')[0]     //找到模态框的dom 头部  这个有可能会不一样 自己找一下就好了     const header = el.getElementsByClassName('modal-header')[0]     let left = 0     let top = 0      // 鼠标变成可移动的指示     header.style.cursor = 'move'      // 未定义 destroyOnClose 时，dom未被销毁，关闭弹窗再次打开，弹窗会停留在上一次拖动的位置     if (!destroyOnClose) {       left = modal.left || 0       top = modal.top || 0     }     // top 初始值为 offsetTop     top = top || modal.offsetTop     header.onmousedown = e => {       const startX = e.clientX       const startY = e.clientY       header.left = header.offsetLeft       header.top = header.offsetTop       el.onmousemove = event => {         const endX = event.clientX         const 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.left         top = modal.top         el.onmousemove = null         el.onmouseup = null         header.releaseCapture && header.releaseCapture()       }       header.setCapture && header.setCapture()     }   }) }) 

• 在main.js 或者main.ts中引入，全局自定义命令 import './utils/dragModal.js'

• 使用的话直接在 a-model上面加v-drag-modal就好了

• <a-modal       v-drag-modal       :visible="true"       :centered="true"       :destroyOnClose="true"       :maskClosable="false"       title="新建文件夹"       :width="1200"     >    ....内容.... </a-modal>