elementUI中dialog组件经常会用到,如果能让其任意拖拽放到不同的位置就更好了,实现方法如下:
dialogDraggable.js代码:
importVuefrom'vue'
//v-dialogDrag:弹窗拖拽
Vue.directive('dialogDrag',{
bind(el,binding,vnode,oldVnode){
constdialogHeaderEl=el.querySelector('.el-dialog__header')
constdragDom=el.querySelector('.el-dialog')
dialogHeaderEl.style.cursor='move'
//获取原有属性iedom元素.currentStyle火狐谷歌window.getComputedStyle(dom元素,null);
conststy=dragDom.currentStyle||window.getComputedStyle(dragDom,null)
dialogHeaderEl.onmousedown=(e)=>{
//鼠标按下,计算当前元素距离可视区的距离
constdisX=e.clientX-dialogHeaderEl.offsetLeft
constdisY=e.clientY-dialogHeaderEl.offsetTop
//获取到的值带px正则匹配替换
letstyL,styT
//注意在ie中第一次获取到的值为组件自带50%移动之后赋值为px
if(sty.left.includes('%')){
styL=+document.body.clientWidth*(+sty.left.replace(/%/g,'')/100)
styT=+document.body.clientHeight*(+sty.top.replace(/%/g,'')/100)
}else{
styL=+sty.left.replace(/px/g,'')
styT=+sty.top.replace(/px/g,'')
}
document.onmousemove=function(e){
//通过事件委托,计算移动的距离
constl=e.clientX-disX
constt=e.clientY-disY
//移动当前元素
dragDom.style.left=`${l+styL}px`
dragDom.style.top=`${t+styT}px`
//将此时的位置传出去
//binding.value({x:e.pageX,y:e.pageY})
}
document.onmouseup=function(e){
document.onmousemove=null
document.onmouseup=null
}
}
}
})
main.js引用:
1
import‘@/assets/dialogDraggable.js'
模块中引用
1
<el-dialogv-dialogDrag></el-dialog>
有几个点须要注意一下浏览器
每一个弹窗都要有惟一dom可操做指令能够作到
拖拽时要添加可拖拽区块header
因为element-uidialog组件在设计时宽度用了百分比,这里不一样浏览器有兼容性问题
实现拖拽宽高时获取边缘问题div定位设置模拟边缘
|