在ant-design-vue(v.1.6.2)框架中，modal元件預設情況下彈窗是固定在頁面上且不可移動的，根據現有需求，新增彈窗可拖拽移動的功能。

自定義指令v-drag-modal

新建dragModal.js，編寫vue的自定義指令。

import Vue from 'vue'

// 註冊自定義拖拽指令，彌補 modal 元件不能拖動的缺陷
Vue.directive('drag-modal', (el, bindings, vnode) => {
  Vue.nextTick(() => {
    const { visible, destroyOnClose } = vnode.componentInstance
    // 防止未定義 destroyOnClose 關閉彈窗時dom未被銷燬，指令被重複呼叫
    if (!visible) return
    const modal = el.getElementsByClassName('ant-modal')[0]
    const header = el.getElementsByClassName('ant-modal-header')[0]
    let left = 0
    let top = 0

    // 設定遮罩層可滾動
    setTimeout(() => {
      document.body.style.width = '100%'
      document.body.style.overflowY = 'inherit'
    }, 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.js中引入上面定義的指令

import './directives/dragModal'

Modal元件使用指令

在Modal元件上使用v-drag-modal指令

<a-modal
  title="還款計劃明細"
  v-model="dialogVisible"
  v-drag-modal
  destroyOnClose
  :mask="false"
  :maskClosable="false"
>
    ...
</a-modal>

頁面效果

彈窗遮罩層為透明，彈窗可拖拽移動，且網頁背景可上下滾動。

如有錯誤，請多指教，謝謝！