自定义弹窗hears拖动
自定义的弹窗鼠标放在弹窗某一部分可以拖动实现。
步骤
1、新建js文件。自定义指令。
const dragx6 =function (el, binding, vnode) {
const dialogHeaderEl = el.querySelector('.headers')
const oDiv=el;//当前元素
dialogHeaderEl.onmousedown = (e) => {
//鼠标按下,计算当前元素距离可视的距离
let disX=e.clientX-oDiv.offsetLeft;
let disY=e.clientY-oDiv.offsetTop;
document.onmousemove=function(e){
//通过事件委托,计算移动的距离
let l=e.clientX-disX;
let t=e.clientY-disY;
//移动当前元素
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
document.onmouseup=function(e){
document.onmousemove=null;
document.onmouseup=null;
}
}
document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
export default dragx6
2、在使用的弹窗中加入指令。
<div class="x6-modal " v-dragx6 v-show="viewDialog">
<div class="headers">
<div class="top-btns">
<img
@click="handleClose"
src="@/assets/gis-rockets/popup/close-kuang.png"
alt=""
/>
</div>
</div>
</div>