学习笔记----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>