解决el-dialog不能拖拽、全屏的烦恼

当公司有需要将弹窗移动全屏的需求时，你还煞费苦心，心力交瘁地去码代码，写拖拽吗？

有我在，一切都不用怕，直接copy上代码，一分钟解决你的烦恼。

直接上干货：

* 使用方法

* 将以下代码复制到一个js文件中，然后在入口文件main.js中import引入即可；

* 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。

* 给dialog设置 :close-on-click-modal="false" , 禁止点击遮罩层关闭弹出层

* 如果是form表单，不要将提交等按钮放置el-form-item，以免在上下拉伸时被隐藏

(```

*/// v-dialogDrag: 弹窗拖拽+水平方向伸缩Vue.directive('dialogDrag',{bind(el,binding,vnode,oldVnode){//弹框可拉伸最小宽高letminWidth=400;letminHeight=300;//初始非全屏letisFullScreen=false;//当前宽高letnowWidth=0;letnowHight=0;//当前顶部高度letnowMarginTop=0;//获取弹框头部（这部分可双击全屏）constdialogHeaderEl=el.querySelector('.el-dialog__header');//弹窗constdragDom=el.querySelector('.el-dialog');//给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；dragDom.style.overflow="auto";//清除选择头部文字效果//dialogHeaderEl.onselectstart = new Function("return false");//头部加上可拖动cursordialogHeaderEl.style.cursor='move';// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);conststy=dragDom.currentStyle||window.getComputedStyle(dragDom,null);letmoveDown=(e)=>{// 鼠标按下，计算当前元素距离可视区的距离constdisX=e.clientX-dialogHeaderEl.offsetLeft;constdisY=e.clientY-dialogHeaderEl.offsetTop;// 获取到的值带px 正则匹配替换letstyL,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){// 通过事件委托，计算移动的距离constl=e.clientX-disX;constt=e.clientY-disY;// 移动当前元素 dragDom.style.left=`${l+styL}px`;dragDom.style.top=`${t+styT}px`;//将此时的位置传出去//binding.value({x:e.pageX,y:e.pageY})};document.onmouseup=function(e){document.onmousemove=null;document.onmouseup=null;};}dialogHeaderEl.onmousedown=moveDown;//双击头部全屏效果dialogHeaderEl.ondblclick=(e)=>{if(isFullScreen==false){nowHight=dragDom.clientHeight;nowWidth=dragDom.clientWidth;nowMarginTop=dragDom.style.marginTop;dragDom.style.left=0;dragDom.style.top=0;dragDom.style.height="100VH";dragDom.style.width="100VW";dragDom.style.marginTop=0;isFullScreen=true;dialogHeaderEl.style.cursor='initial';dialogHeaderEl.onmousedown=null;}else{dragDom.style.height="auto";dragDom.style.width=nowWidth+'px';dragDom.style.marginTop=nowMarginTop;isFullScreen=false;dialogHeaderEl.style.cursor='move';dialogHeaderEl.onmousedown=moveDown;}}dragDom.onmousemove=function(e){letmoveE=e;if(e.clientX>dragDom.offsetLeft+dragDom.clientWidth-10||dragDom.offsetLeft+10>e.clientX){dragDom.style.cursor='w-resize';}elseif(el.scrollTop+e.clientY>dragDom.offsetTop+dragDom.clientHeight-10){dragDom.style.cursor='s-resize';}else{dragDom.style.cursor='default';dragDom.onmousedown=null;}dragDom.onmousedown=(e)=>{constclientX=e.clientX;constclientY=e.clientY;letelW=dragDom.clientWidth;letelH=dragDom.clientHeight;letEloffsetLeft=dragDom.offsetLeft;letEloffsetTop=dragDom.offsetTop;dragDom.style.userSelect='none';letELscrollTop=el.scrollTop;//判断点击的位置是不是为头部if(clientX>EloffsetLeft&&clientX<EloffsetLeft+elW&&clientY>EloffsetTop&&clientY<EloffsetTop+100){//如果是头部在此就不做任何动作，以上有绑定dialogHeaderEl.onmousedown = moveDown;}else{document.onmousemove=function(e){e.preventDefault();// 移动时禁用默认事件//左侧鼠标拖拽位置if(clientX>EloffsetLeft&&clientX<EloffsetLeft+10){//往左拖拽if(clientX>e.clientX){dragDom.style.width=elW+(clientX-e.clientX)*2+'px';}//往右拖拽if(clientX<e.clientX){if(dragDom.clientWidth<minWidth){}else{dragDom.style.width=elW-(e.clientX-clientX)*2+'px';}}}//右侧鼠标拖拽位置if(clientX>EloffsetLeft+elW-10&&clientX<EloffsetLeft+elW){//往左拖拽if(clientX>e.clientX){if(dragDom.clientWidth<minWidth){}else{dragDom.style.width=elW-(clientX-e.clientX)*2+'px';}}//往右拖拽if(clientX<e.clientX){dragDom.style.width=elW+(e.clientX-clientX)*2+'px';}}//底部鼠标拖拽位置if(ELscrollTop+clientY>EloffsetTop+elH-20&&ELscrollTop+clientY<EloffsetTop+elH){//往上拖拽if(clientY>e.clientY){if(dragDom.clientHeight<minHeight){}else{dragDom.style.height=elH-(clientY-e.clientY)*2+'px';}}//往下拖拽if(clientY<e.clientY){dragDom.style.height=elH+(e.clientY-clientY)*2+'px';}}};//拉伸结束document.onmouseup=function(e){document.onmousemove=null;document.onmouseup=null;};}}}}})

```)

##拷贝上面的代码新建一个js文件到main.js 文件直接引入（名字随便起我就起了directives.js）

`// main.jsimport'./directives'`

##最后把要拖拽的弹窗加上 v-dailogDrag 命令就行

(```

// call.center.detail.vue

<rrc-dialog v-dialogDrag title="呼出结果":visible.sync="dialogOutVisible">...</rrc-dialog>

```)

PS:在main.js 引入之后就是全局变量了，命令可以全局使用；

#存在一个小问题，有些可能还要求能拖拽之后还要能复制里面的内容文字什么的，我暂时还没找到解决方法，

网上找到说可以这样解决解决拖动的问题，我为了反其道而行，把他变成能选中，但是不可观。

document.onselectstart = function() { return false; };//解决拖动会选中文字的问题

各位大佬要是知道怎么解决技能拖动，又能选中文字复制的话，请告知，感激不尽！

码字不容易喜欢的可以扫码公共号关注一波，有各种福利推送

![image.png](https://upload-images.jianshu.io/upload_images/15567762-94e1e153b0c22b1c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)