哪个网站可以做视频播放器,建筑工程网络计划方法,wordpress名片主题,wordpress插件events前言 在实际开发中我们经常使用el-dialog弹出框做表单#xff0c;一般情况都是居中。遮挡到了一部分数据 当我们想要查看弹出框下面的数据时#xff0c;就只能先把弹出框关闭#xff0c;查看完数据之后在打开弹框 我们通过动态样式#xff0c;和鼠标事件就可以实现。但自…前言 在实际开发中我们经常使用el-dialog弹出框做表单一般情况都是居中。遮挡到了一部分数据 当我们想要查看弹出框下面的数据时就只能先把弹出框关闭查看完数据之后在打开弹框 我们通过动态样式和鼠标事件就可以实现。但自己写的在适配性和全面性上还是有所欠缺的 这种我们可以直接复制使用写成全局自定义指令。多的地方使用并且只做加法
代码实现-没有自定义指令情况下
1.来到src/创建directive文件夹
2.在src/directive/创建dialog文件夹专门用来放关于dialog的代码
3.在src/directive/dialog创建drag.js文件-弹出框的拖拽-代码如下
/*** v-dialogDrag 弹窗拖拽*/
export default {bind(el, binding, vnode, oldVnode) {const value binding.valueif (value false) return// 获取拖拽内容头部const dialogHeaderEl el.querySelector(.el-dialog__header);const dragDom el.querySelector(.el-dialog);dialogHeaderEl.style.cursor move;// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);const sty dragDom.currentStyle || window.getComputedStyle(dragDom, null);dragDom.style.position absolute;dragDom.style.marginTop 0;let width dragDom.style.width;if (width.includes(%)) {width document.body.clientWidth * (width.replace(/%/g, ) / 100);} else {width width.replace(/\px/g, );}dragDom.style.left ${(document.body.clientWidth - width) / 2}px;// 鼠标按下事件dialogHeaderEl.onmousedown (e) {// 鼠标按下计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)const disX e.clientX - dialogHeaderEl.offsetLeft;const disY e.clientY - dialogHeaderEl.offsetTop;
// 获取到的值带px 正则匹配替换let styL, styT;
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为pxif (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) {// 通过事件委托计算移动的距离 开始拖拽至结束拖拽的距离const l e.clientX - disX;const t e.clientY - disY;
let finallyL l styLlet finallyT t styT
// 移动当前元素dragDom.style.left ${finallyL}px;dragDom.style.top ${finallyT}px;
};
document.onmouseup function (e) {document.onmousemove null;document.onmouseup null;};}}
}
4.在src/directive/dialog创建dragWidth.js文件-弹出框的宽度改变-代码如下
/*** 可拖动弹窗宽度右侧边*/
export default {bind(el) {const dragDom el.querySelector(.el-dialog);const lineEl document.createElement(div);lineEl.style width: 5px; background: inherit; height: 80%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;;lineEl.addEventListener(mousedown,function (e) {// 鼠标按下计算当前元素距离可视区的距离const disX e.clientX - el.offsetLeft;// 当前宽度const curWidth dragDom.offsetWidth;document.onmousemove function (e) {e.preventDefault(); // 移动时禁用默认事件// 通过事件委托计算移动的距离const l e.clientX - disX;dragDom.style.width ${curWidth l}px;};document.onmouseup function (e) {document.onmousemove null;document.onmouseup null;};}, false);dragDom.appendChild(lineEl);}
}
5.在src/directive/dialog创建dragHeight.js文件-弹出框的宽度和高度改变-代码如下
/*** 可拖动弹窗高度右下角- 也可以改变高度和宽度*/
export default {bind(el) {const dragDom el.querySelector(.el-dialog);const lineEl document.createElement(div);lineEl.style width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;;lineEl.addEventListener(mousedown,function(e) {// 鼠标按下计算当前元素距离可视区的距离const disX e.clientX - el.offsetLeft;const disY e.clientY - el.offsetTop;// 当前宽度 高度const curWidth dragDom.offsetWidth;const curHeight dragDom.offsetHeight;document.onmousemove function(e) {e.preventDefault(); // 移动时禁用默认事件// 通过事件委托计算移动的距离const xl e.clientX - disX;const yl e.clientY - disYdragDom.style.width ${curWidth xl}px;dragDom.style.height ${curHeight yl}px;};document.onmouseup function(e) {document.onmousemove null;document.onmouseup null;};}, false);dragDom.appendChild(lineEl);}
}
6.在src/directive/创建index.js文件-对自定义指令统一注册-代码如下
// dialog弹出框-可拖动
import dialogDrag from ./dialog/drag
// dialog弹出框-宽度可拖动
import dialogDragWidth from ./dialog/dragWidth
// dialog弹出框-高度可拖动也可拖动宽度
import dialogDragHeight from ./dialog/dragHeight
const install function (Vue) {// dialog弹出框-可拖动-使用v-dialogDragVue.directive(dialogDrag, dialogDrag)// dialog弹出框-宽度可拖动-使用v-dialogDragWidthVue.directive(dialogDragWidth, dialogDragWidth)// dialog弹出框-高度可拖动也可拖动宽度- 使用v-dialogDragHeightVue.directive(dialogDragHeight, dialogDragHeight)
}
export default install
7.来到main.js引入注册
// 自定义指令
import directive from ./directive
// 挂载
Vue.use(directive)
8.来到页面使用 总结
经过这一趟流程下来相信你也对 vue el-dialog弹出框自定义指令实现拖拽改变位置-宽度-高度 有了初步的深刻印象但在实际开发中我 们遇到的情况肯定是不一样的所以我们要理解它的原理万变不离其宗。加油打工人 什么不足的地方请大家指出谢谢 -- 風过无痕
