上海商务网站建设,手机怎么管理wifi踢人,软件开发工具推荐,wordpress邮件伪造ElementUI 自带的对话框组件(el-dialog)没有拖动和最小化的处理#xff0c;目前业务遇到呼叫弹屏处理#xff0c;基于el-dialog 再次进行封装下#xff0c;上篇文章有人说图片换成代码就好了#xff0c;下面代码部分我就直接放代码了#xff0c;不再用图片处理了。先看看效…ElementUI 自带的对话框组件(el-dialog)没有拖动和最小化的处理目前业务遇到呼叫弹屏处理基于el-dialog 再次进行封装下上篇文章有人说图片换成代码就好了下面代码部分我就直接放代码了不再用图片处理了。先看看效果吧效果gif下面拆分说明(拖动全屏缩放关闭)拖拽属性注册dialogDrag的指令这样就可以在拖拽弹框的地方直接用v-dialogDrag这部分代码我借鉴别人写的主要原理是获取dom节点根据鼠标按下移动和放开的事件以当前窗口为基进行位置改变移动。// 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.cssText ;cursor:move; dragDom.style.cssText ;top:0px; // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); const sty (() { 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 (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 (e) { document.onmousemove null; document.onmouseup null; }; } }})操作按钮(全屏最小化关闭)首先去掉默认的关闭图标 show-close“false,然后在title 的插槽中放入我们需要的操作按钮或者图标具体排列样式用css 控制就好了。相关代码区域事件处理我们在处理这个的时候不可避免的遇到了需要更改props属性的问题我们知道vue中默认的组件中是不能修改props 属性的,如果非要改当然也有别的办法。第一种方法就是 data 中重新定义一个变量初始用props 传入的值第二种方法就是 用computed计算属性第三种方法就是 $emit 触发事件父组件去处理事件第四种方法就是 用.sync修饰符 本文用到的是这种方法具体怎么用.sync 修饰符呢看下面这个小例子// 父组件// 子组件其他弹窗事件正常$emit 抛出就可以了组件封装代码 {{ title }} {{minContent}} 组件调用 打开弹框这是弹框内容区域 事件及属性说明除了特殊的支持 element dialog 的全部属性也就是文档上的属性都可以用type 默认是弹框如果要最小化的显示就指名不需要就不用传递这个参数fullscreen.sync 如果需要自定义动态设置全屏记得绑定.sync 修饰符element-ui dialog 文档总结以上就是对弹窗组件的封装代码也都在上面了总的来说业务开发的时候有轮子最好可以直接用没有还是需要造造如果上面写的有问题或多那一部分不理解的欢迎下面讨论我们一起学习一起进步。
