vuedialog全屏_Vue实现弹窗拖拽和放大效果

实现代码部分

/** 使用方法* 将以下代码复制到一个drag.js文件中&＃xff0c;然后在入口文件main.js中导入&＃xff1a;import ‘./util/drog.js’&＃xff1b;* 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。* 给dialog设置 :close-on-click-modal&＃61;"false" , 禁止点击遮罩层关闭弹出层* 如果是form表单&＃xff0c;不要将提交等按钮放置el-form-item&＃xff0c;以免在上下拉伸时被隐藏*/// v-dialogDrag: 弹窗拖拽&＃43;水平方向伸缩Vue.directive(&＃39;dialogDrag&＃39;, { bind(el, binding, vnode, oldVnode) { // 弹框可拉伸最小宽高 const minWidth &＃61; 400 const minHeight &＃61; 300 // 初始非全屏 let isFullScreen &＃61; false // 当前顶部高度 let nowMarginTop &＃61; 0 // 获取弹框头部(这部分可双击全屏) const dialogHeaderEl &＃61; el.querySelector(&＃39;.el-dialog__header&＃39;) // 弹窗 const dragDom &＃61; el.querySelector(&＃39;.el-dialog&＃39;) // 给弹窗加上overflow auto&＃xff1b;不然缩小时框内的标签可能超出dialog&＃xff1b; dragDom.style.overflow &＃61; &＃39;auto&＃39; // 清除选择头部文字效果 // dialogHeaderEl.onselectstart &＃61; new Function("return false"); // 头部加上可拖动cursor dialogHeaderEl.style.cursor &＃61; &＃39;move&＃39; // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); const sty &＃61; dragDom.currentStyle || window.getComputedStyle(dragDom, null) const moveDown &＃61; e &＃61;> { // 鼠标按下&＃xff0c;计算当前元素距离可视区的距离 const disX &＃61; e.clientX - dialogHeaderEl.offsetLeft const disY &＃61; e.clientY - dialogHeaderEl.offsetTop // 获取到的值带px 正则匹配替换 let styL, styT // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px if (sty.left.includes(&＃39;%&＃39;)) { styL &＃61; &＃43;document.body.clientWidth * (&＃43;sty.left.replace(/\%/g, &＃39;&＃39;) / 100) styT &＃61; &＃43;document.body.clientHeight * (&＃43;sty.top.replace(/\%/g, &＃39;&＃39;) / 100) } else { styL &＃61; &＃43;sty.left.replace(/\px/g, &＃39;&＃39;) styT &＃61; &＃43;sty.top.replace(/\px/g, &＃39;&＃39;) } document.onmousemove &＃61; function(e) { // 通过事件委托&＃xff0c;计算移动的距离 const l &＃61; e.clientX - disX const t &＃61; e.clientY - disY // 移动当前元素 dragDom.style.left &＃61; &＃96;${l &＃43; styL}px&＃96; dragDom.style.top &＃61; &＃96;${t &＃43; styT}px&＃96; // 将此时的位置传出去 // binding.value({x:e.pageX,y:e.pageY}) } document.onmouseup &＃61; function(e) { document.onmousemove &＃61; null document.onmouseup &＃61; null } } dialogHeaderEl.onmousedown &＃61; moveDown // 当前宽高 let nowWidth &＃61; 0 // let nowHight &＃61; 0 // 双击头部全屏效果 dialogHeaderEl.ondblclick &＃61; e &＃61;> { if (isFullScreen &＃61;&＃61;&＃61; false) { // nowHight &＃61; dragDom.clientHeight nowWidth &＃61; dragDom.clientWidth nowMarginTop &＃61; dragDom.style.marginTop dragDom.style.left &＃61; 0 dragDom.style.top &＃61; 0 dragDom.style.height &＃61; &＃39;100VH&＃39; dragDom.style.width &＃61; &＃39;100VW&＃39; dragDom.style.marginTop &＃61; 0 isFullScreen &＃61; true dialogHeaderEl.style.cursor &＃61; &＃39;initial&＃39; dialogHeaderEl.onmousedown &＃61; null } else { dragDom.style.height &＃61; &＃39;auto&＃39; dragDom.style.width &＃61; nowWidth &＃43; &＃39;px&＃39; dragDom.style.marginTop &＃61; nowMarginTop isFullScreen &＃61; false dialogHeaderEl.style.cursor &＃61; &＃39;move&＃39; dialogHeaderEl.onmousedown &＃61; moveDown } } dragDom.onmousemove &＃61; function(e) { // let moveE &＃61; e if ( e.clientX > dragDom.offsetLeft &＃43; dragDom.clientWidth - 10 || dragDom.offsetLeft &＃43; 10 > e.clientX ) { dragDom.style.cursor &＃61; &＃39;w-resize&＃39; } else if ( el.scrollTop &＃43; e.clientY > dragDom.offsetTop &＃43; dragDom.clientHeight - 10 ) { dragDom.style.cursor &＃61; &＃39;s-resize&＃39; } else { dragDom.style.cursor &＃61; &＃39;default&＃39; dragDom.onmousedown &＃61; null } dragDom.onmousedown &＃61; e &＃61;> { const clientX &＃61; e.clientX const clientY &＃61; e.clientY const elW &＃61; dragDom.clientWidth const elH &＃61; dragDom.clientHeight const EloffsetLeft &＃61; dragDom.offsetLeft const EloffsetTop &＃61; dragDom.offsetTop dragDom.style.userSelect &＃61; &＃39;none&＃39; const ELscrollTop &＃61; el.scrollTop // 判断点击的位置是不是为头部 if ( clientX > EloffsetLeft && clientX EloffsetTop && clientY EloffsetLeft && clientX e.clientX) { dragDom.style.width &＃61; elW &＃43; (clientX - e.clientX) * 2 &＃43; &＃39;px&＃39; } // 往右拖拽 if (clientX EloffsetLeft &＃43; elW - 10 && clientX e.clientX) { if (dragDom.clientWidth EloffsetTop &＃43; elH - 20 && ELscrollTop &＃43; clientY e.clientY) { if (dragDom.clientHeight

在main.js文件中引入

//在main.js引用drog.js的内容import &＃39;./util/drog&＃39;

然后点击打开弹窗就可以实现拖拽左右和上下缩放了