|
|
/**
|
|
|
* v-dialogDrag 弹窗拖拽（终极稳定版）
|
|
|
* 解决：初始居中 + 按下闪烁、偏移错误、飞到右下角
|
|
|
*/
|
|
|
export default {
|
|
|
bind(el, binding) {
|
|
|
const value = binding.value
|
|
|
if (value === false) return
|
|
|
|
|
|
const dialogHeaderEl = el.querySelector('.el-dialog__header')
|
|
|
const dragDom = el.querySelector('.el-dialog')
|
|
|
|
|
|
if (!dialogHeaderEl || !dragDom) return
|
|
|
|
|
|
dialogHeaderEl.style.cursor = 'move'
|
|
|
|
|
|
// 初始化：绝对居中
|
|
|
dragDom.style.position = 'fixed'
|
|
|
dragDom.style.margin = '0'
|
|
|
dragDom.style.left = '50%'
|
|
|
dragDom.style.top = '50%'
|
|
|
dragDom.style.transform = 'translate(-50%, -50%)'
|
|
|
|
|
|
// 鼠标按下
|
|
|
dialogHeaderEl.onmousedown = (e) => {
|
|
|
e.preventDefault()
|
|
|
|
|
|
// 先拿到当前弹窗真实的 left / top（去掉 translate 影响）
|
|
|
const currLeft = dragDom.getBoundingClientRect().left
|
|
|
const currTop = dragDom.getBoundingClientRect().top
|
|
|
|
|
|
// 按下瞬间立刻清除居中，重新设置真实 left top
|
|
|
dragDom.style.transform = 'none'
|
|
|
dragDom.style.left = currLeft + 'px'
|
|
|
dragDom.style.top = currTop + 'px'
|
|
|
|
|
|
// 计算正确偏移（这是唯一不飞的算法）
|
|
|
const disX = e.clientX - currLeft
|
|
|
const disY = e.clientY - currTop
|
|
|
|
|
|
// 移动
|
|
|
document.onmousemove = (e) => {
|
|
|
let left = e.clientX - disX
|
|
|
let top = e.clientY - disY
|
|
|
|
|
|
dragDom.style.left = left + 'px'
|
|
|
dragDom.style.top = top + 'px'
|
|
|
}
|
|
|
|
|
|
// 抬起
|
|
|
document.onmouseup = () => {
|
|
|
document.onmousemove = null
|
|
|
document.onmouseup = null
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
