广州化妆品加工,查找iphone,重庆中学学习网
element-ui对话框可拖拽及边界处理
应业务需求，需要实现对话框可拖拽问题，应element-ui没有提供官方支持，于是便参考大神的文章，得出了适合业务需要的解决方案。很多大神给出的代码是没有解决边界问题的，但是不解决边界问题存在一个bug，拖到不可视区域后边再也拖不回来了，不信你们可以试试。
在实现的功能的情况下，封装成了js文件，然后再main.js中引入后可全局使用。
还是上代码吧
功能实现代码directives.js代码如下：
我要评论
import vue from 'vue';
// v-dialogdrag: 弹窗拖拽属性
vue.directive('dialogdrag', {
bind(el, binding, vnode, oldvnode) {
const dialogheaderel = el.queryselector('.el-dialog__header');
const dragdom = el.queryselector('.el-dialog');
//dialogheaderel.style.cursor = 'move';
dialogheaderel.style.csstext += ';cursor:move;'
dragdom.style.csstext += ';top:0px;'
// 获取原有属性 ie dom元素.currentstyle 火狐谷歌 window.getcomputedstyle(dom元素, null);
const sty = (function() {
if (window.document.currentstyle) {
return (dom, attr) => dom.currentstyle[attr];
} else{
return (dom, attr) => getcomputedstyle(dom, false)[attr];
}
})()
dialogheaderel.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disx = e.clientx - dialogheaderel.offsetleft;
const disy = e.clienty - dialogheaderel.offsettop;
const screenwidth = document.body.clientwidth; // body当前宽度
const screenheight = document.documentelement.clientheight; // 可见区域高度(应为body高度，可某些环境下无法获取)
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 正则匹配替换
let styl = sty(dragdom, 'left');
let styt = 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) {
// 通过事件委托，计算移动的距离
let left = e.clientx - disx;
let top = e.clienty - disy;
// 边界处理
if (-(left) > mindragdomleft) {
left = -(mindragdomleft);
} else if (left > maxdragdomleft) {
left = maxdragdomleft;
}
if (-(top) > mindragdomtop) {
top = -(mindragdomtop);
} else if (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属性
<el-dialog v-dialogdrag></el-dialog>
具体使用便是这样，希望有人看到哈哈哈，当然主要还是想帮到大家。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论