学习笔记----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="新建文件夹" : > ....内容.... </a-modal>