import {getRefPromise} from '@/utils/util'
|
|
/** JModal 的拖拽混入 */
|
export default {
|
data() {
|
return {
|
// 拖动配置
|
dragSettings: {
|
// 上次拖动top记录
|
top: null,
|
// 上次拖动left记录
|
left: null,
|
wrapEl: null,
|
dragEl: null,
|
headerEl: null,
|
},
|
}
|
},
|
watch: {
|
visible() {
|
if (!this.visible || !this.draggable) {
|
return
|
}
|
this.handleDrag()
|
},
|
draggable() {
|
if (!this.visible || !this.draggable) {
|
return
|
}
|
this.handleDrag()
|
},
|
},
|
methods: {
|
async handleDrag() {
|
let modalRef = await getRefPromise(this, 'modal')
|
const dragWraps = modalRef.$el.querySelectorAll('.ant-modal-wrap')
|
let wrapEl = dragWraps[0]
|
if (!wrapEl) return
|
this.dragSettings.wrapEl = wrapEl
|
this.dragSettings.dragEl = wrapEl.querySelector('.ant-modal')
|
this.dragSettings.headerEl = wrapEl.querySelector('.ant-modal-header')
|
const display = getStyle(wrapEl, 'display')
|
const draggable = wrapEl.getAttribute('data-drag')
|
if (display !== 'none') {
|
// 拖拽位置
|
if (draggable === null || this.destroyOnClose) {
|
this.enableDrag(wrapEl)
|
}
|
}
|
},
|
/** 启用拖拽 */
|
enableDrag() {
|
let {wrapEl, dragEl, headerEl} = this.dragSettings
|
if (!wrapEl) return
|
wrapEl.setAttribute('data-drag', this.draggable)
|
if (!headerEl || !dragEl || !this.draggable) return
|
|
// 还原上一次移动的位置
|
this.resetModalPosition()
|
|
headerEl.style.cursor = 'move'
|
headerEl.onmousedown = (e) => {
|
if (!e) return
|
// 鼠标按下，计算当前元素距离可视区的距离
|
const disX = e.clientX
|
const disY = e.clientY
|
const screenWidth = document.body.clientWidth // body当前宽度
|
const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)
|
|
const dragElWidth = dragEl.offsetWidth // 对话框宽度
|
const dragElHeight = dragEl.offsetHeight // 对话框高度
|
|
const minDragElLeft = dragEl.offsetLeft
|
|
const maxDragElLeft = screenWidth - dragEl.offsetLeft - dragElWidth
|
const minDragElTop = dragEl.offsetTop
|
const maxDragElTop = screenHeight - dragEl.offsetTop - dragElHeight
|
// 获取到的值带px 正则匹配替换
|
const domLeft = getStyle(dragEl, 'left')
|
const domTop = getStyle(dragEl, 'top')
|
let styL = +domLeft
|
let styT = +domTop
|
|
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
|
if (domLeft.includes('%')) {
|
styL = +document.body.clientWidth * (+domLeft.replace(/%/g, '') / 100)
|
styT = +document.body.clientHeight * (+domTop.replace(/%/g, '') / 100)
|
} else {
|
styL = +domLeft.replace(/px/g, '')
|
styT = +domTop.replace(/px/g, '')
|
}
|
|
document.onmousemove = (e) => {
|
// 全屏时不触发移动方法
|
if (this.innerFullscreen) {
|
return
|
}
|
// 通过事件委托，计算移动的距离
|
let left = e.clientX - disX
|
let top = e.clientY - disY
|
|
// 边界处理
|
if (-left > minDragElLeft) {
|
left = -minDragElLeft
|
} else if (left > maxDragElLeft) {
|
left = maxDragElLeft
|
}
|
|
if (-top > minDragElTop) {
|
top = -minDragElTop
|
} else if (top > maxDragElTop) {
|
top = maxDragElTop
|
}
|
|
this.setModalPosition(top + styT, left + styL)
|
}
|
|
document.onmouseup = () => {
|
document.onmousemove = null
|
document.onmouseup = null
|
}
|
}
|
},
|
|
/**
|
* 移动弹窗位置
|
* @param top 顶部位置
|
* @param left 左侧位置
|
* @param remember 是否记录位置，默认 true
|
*/
|
setModalPosition(top, left, remember = true) {
|
// 记录移动位置
|
if (remember) {
|
this.dragSettings.top = top
|
this.dragSettings.left = left
|
}
|
// 移动当前元素
|
this.dragSettings.dragEl.style.cssText += `;left:${left}px;top:${top}px;`
|
},
|
/**
|
* 将弹窗移动到上次记录的位置
|
*/
|
resetModalPosition() {
|
this.setModalPosition(this.dragSettings.top, this.dragSettings.left, false)
|
},
|
|
},
|
}
|
|
function getStyle(dom, attr) {
|
return getComputedStyle(dom)[attr]
|
}
|
