基于ant-design的a-modal自定义vue拖拽指令

官网自定义指令链接
写一个dragDialog.js
在main.js中引入
import ‘./core/directives/dragDialog.js’

// 让 dialog 支持鼠标拖动
import Vue from 'vue'

Vue.directive('DragDialog', {
  update: function (el, binding, vnode) {
    if (!binding.value || !binding.value.reset) return
    const dialog = el.querySelector('.ant-modal')
    if (el.hasAttribute('margin-top') && el.style.display && el.style.display === 'none') {
      dialog.style.margin = null
      dialog.style.marginTop = el.getAttribute('margin-top')
      dialog.style.left = null
      dialog.style.top = null
    }
  },
  inserted: function (el, binding, vnode) {
    const header = el.querySelector('.ant-modal-header')
    const dialog = el.querySelector('.ant-modal')
    const body = document.body
    let status = 0
    let offsetLeft
    let offsetTop
    if (header) {
      el.setAttribute('margin-top', dialog.style.marginTop)
      header.classList.add('v-drag-header')
      header.onmousedown = e => {
        if (e.target.className.indexOf('v-drag-header') !== -1 || e.target.parentElement.className.indexOf('v-drag-header') !== -1) {
          status = 1
          offsetLeft = e.pageX - dialog.offsetLeft
          offsetTop = e.pageY - dialog.offsetTop
          dialog.classList.add('v-drag-dialog')
          if (!dialog.style.left) {
            dialog.style.margin = 'initial'
            dialog.style.top = (e.pageY - offsetTop) + 'px'
            dialog.style.left = (global.innerWidth - dialog.offsetWidth) / 2 + 'px'
          }
        }
      }

      header.onmousemove = e => {
        if (status) {
          let left = (e.pageX - offsetLeft)
          let top = (e.pageY - offsetTop)
          if (binding.value && binding.value.range && binding.value.range === 'body') {
            if (top + dialog.offsetHeight > global.innerHeight) top = global.innerHeight - dialog.offsetHeight
            if (left + dialog.offsetWidth > global.innerWidth) left = global.innerWidth - dialog.offsetWidth
            if (top < 0) top = 0
            if (left < 0) left = 0
          }
          dialog.style.top = top + 'px'
          dialog.style.left = left + 'px'
        }
      }

      body.onmouseup = e => {
        if (status) {
          status = 0
          dialog.classList.remove('v-drag-dialog')
        }
      }
    }
  }
})

注意 如果自定义modal销毁了内部 指令可能不可使用