vue实现element-ui对话框可拖拽功能
element-ui对话框可拖拽及边界处理
应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案。很多大神给出的代码是没有解决边界问题的,但是不解决边界问题存在一个bug,拖到不可视区域后边再也拖不回来了,不信你们可以试试。
在实现的功能的情况下,封装成了js文件,然后再main.js中引入后可全局使用。
还是上代码吧
功能实现代码directives.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'; dialogHeaderEl.style.cssText+=';cursor:move;' dragDom.style.cssText+=';top:0px;' //获取原有属性iedom元素.currentStyle火狐谷歌window.getComputedStyle(dom元素,null); conststy=(function(){ if(window.document.currentStyle){ return(dom,attr)=>dom.currentStyle[attr]; }else{ return(dom,attr)=>getComputedStyle(dom,false)[attr]; } })() dialogHeaderEl.onmousedown=(e)=>{ //鼠标按下,计算当前元素距离可视区的距离 constdisX=e.clientX-dialogHeaderEl.offsetLeft; constdisY=e.clientY-dialogHeaderEl.offsetTop; constscreenWidth=document.body.clientWidth;//body当前宽度 constscreenHeight=document.documentElement.clientHeight;//可见区域高度(应为body高度,可某些环境下无法获取) constdragDomWidth=dragDom.offsetWidth;//对话框宽度 constdragDomheight=dragDom.offsetHeight;//对话框高度 constminDragDomLeft=dragDom.offsetLeft; constmaxDragDomLeft=screenWidth-dragDom.offsetLeft-dragDomWidth; constminDragDomTop=dragDom.offsetTop; constmaxDragDomTop=screenHeight-dragDom.offsetTop-dragDomheight; //获取到的值带px正则匹配替换 letstyL=sty(dragDom,'left'); letstyT=sty(dragDom,'top'); //注意在ie中第一次获取到的值为组件自带50%移动之后赋值为px if(styL.includes('%')){ styL=+document.body.clientWidth*(+styL.replace(/\%/g,'')/100); styT=+document.body.clientHeight*(+styT.replace(/\%/g,'')/100); }else{ styL=+styL.replace(/\px/g,''); styT=+styT.replace(/\px/g,''); }; document.onmousemove=function(e){ //通过事件委托,计算移动的距离 letleft=e.clientX-disX; lettop=e.clientY-disY; //边界处理 if(-(left)>minDragDomLeft){ left=-(minDragDomLeft); }elseif(left>maxDragDomLeft){ left=maxDragDomLeft; } if(-(top)>minDragDomTop){ top=-(minDragDomTop); }elseif(top>maxDragDomTop){ top=maxDragDomTop; } //移动当前元素 dragDom.style.cssText+=`;left:${left+styL}px;top:${top+styT}px;`; }; document.onmouseup=function(e){ document.onmousemove=null; document.onmouseup=null; }; } } })
在边界处理上,因为在我的项目中无法获取到body的高度(被这个折磨了好久),所以采取了获取可见区域高度,这里补充点知识
document.body.clientWidth//BODY对象宽度 document.body.clientHeight//BODY对象高度 document.documentElement.clientWidth//可见区域宽度 document.documentElement.clientHeight//可见区域高度
在main.js中引入
//引入Dialog可拖拽,注意文件所在目录。目前尚未发现引入的先后关系,若有再补充 import'./directives.js';
ue文件中使用:
在el-dialog标签中加入v-dialogDrag属性
具体使用便是这样,希望有人看到哈哈哈,当然主要还是想帮到大家。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。