學習筆記----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>