介绍从& # 39;进口Vue Vue # 39;;//v-dialogDrag:弹窗拖拽属性
Vue.directive (& # 39; dialogDrag& # 39;, {
绑定,绑定(el vnode oldVnode) {
const dialogHeaderEl=el.querySelector (& # 39; .el-dialog__header& # 39;);
const dragDom=el.querySelector (& # 39; .el-dialog& # 39;);//dialogHeaderEl.style。光标=& # 39;行动# 39;;
dialogHeaderEl.style。cssText +=& # 39;;游标:移动;& # 39;
dragDom.style。cssText +=& # 39;;最高:0 px; & # 39;//获取原有属性即dom元素。currentStyle火狐谷歌窗口。getComputedStyle (dom元素,null);
const猪圈=(函数(){
如果(window.document.currentStyle) {
返回dom, attr()=比;dom.currentStyle [attr);
其他}{
返回dom, attr()=比;假getComputedStyle (dom) [attr);
}
}) ()
dialogHeaderEl。onmousedown=(e)=比;{//鼠标按下,计算当前元素距离可视区的距离
const disX=e。clientX - dialogHeaderEl.offsetLeft;
const disY=e。clientY - dialogHeaderEl.offsetTop;
const screenWidth=document.body.clientWidth;//当身体前宽度
const screenHeight=document.documentElement.clientHeight;//可见区域高度(应为身体高度,可某些环境下无法获取)
const dragDomWidth=dragDom.offsetWidth;//对话框宽度
const dragDomheight=dragDom.offsetHeight;//对话框高度
const minDragDomLeft=dragDom.offsetLeft;
const maxDragDomLeft=screenWidth - dragDom。offsetLeft - dragDomWidth;
const minDragDomTop=dragDom.offsetTop;
const maxDragDomTop=screenHeight - dragDom。offsetTop - dragDomheight;//获取到的值带px正则匹配替换
让styL=猪圈(dragDom & # 39;左# 39;);
让styT=猪圈(dragDom & # 39;顶部# 39;);//注意在ie中第一次获取到的值为组件自带50%移动之后赋值为px
如果(styL.includes (& # 39; % & # 39;)) {
styL=+ document.body。clientWidth * (+ styL。取代(/\ %/g, & # 39; & # 39;)/100);
styT=+ document.body。clientHeight * (+ styT。取代(/\ %/g, & # 39; & # 39;)/100);
其他}{
styL=+ styL。取代(/\ px/g, & # 39; & # 39;);
styT=+ styT。取代(/\ px/g, & # 39; & # 39;);
}；
文档。onmousemove=function (e) {//通过事件委托,计算移动的距离
让左=e。clientX - disX;
让高层=e。clientY - disY;//边界处理
如果(-(左)在minDragDomLeft) {
左=- (minDragDomLeft);
}else if(左比;maxDragDomLeft) {
左=maxDragDomLeft;
}
如果(-(上)比;minDragDomTop) {
顶级=- (minDragDomTop);
}else if(上比;maxDragDomTop) {
顶级=maxDragDomTop;
}//移动当前元素
dragDom.style。cssText +=?左:${左+ styL} px;: ${最高+ styT} px;”;
}；
文档。onmouseup=function (e) {
文档。onmousemove=零;
文档。onmouseup=零;
}；
}
}
}) document.body。clientWidth//身体对象宽度
document.body。clientHeight//身体对象高度
document.documentElement。clientWidth//可见区域宽度
document.documentElement。clientHeight//可见区域高度 //引入对话框可拖拽,注意文件所在目录。目前尚未发现引入的先后关系,若有再补充
进口& # 39;。/directives.js& # 39;; & lt; el-dialog v-dialogDrag> & lt;/el-dialog>
这篇文章将为大家详细讲解有关怎么实现element-ui对话框可拖拽的功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
element-ui对话框可拖拽及边界处理
应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案。很多大神给出的代码是没有解决边界问题的,但是不解决边界问题存在一个bug,拖到不可视区域后边再也拖不回来了,不信你们可以试试。
在实现的功能的情况下,封装成了js文件,然后再main.js中引入后可全局使用。
还是上代码
功能实现代码指令。js代码如下:
在边界处理上,因为在我的项目中无法获取到身体的高度(被这个折磨了好久),所以采取了获取可见区域高度,这里补充点知识
在主要。js中引入
问题文件中使用:
在el-dialog标签中加入v-dialogDrag属性
关于怎么实现element-ui对话框可拖拽的功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
