官网自定义指令链接
写一个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销毁了内部 指令可能不可使用