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属性
具体使用便是这样，希望有人看到哈哈哈，当然主要还是想帮到大家。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。