當公司有需要將彈窗移動全屏的需求時观话，你還煞費苦心予借，心力交瘁地去碼代碼，寫拖拽嗎频蛔？
有我在灵迫，一切都不用怕，直接copy上代碼晦溪，一分鐘解決你的煩惱瀑粥。
?直接上干貨：
*? 使用方法
*? 將以下代碼復制到一個js文件中，然后在入口文件main.js中import引入即可三圆；
*? 給elementUI的dialog上加上 v-dialogDrag 指令就可以實現(xiàn)彈窗的全屏和拉伸了狞换。
*? 給dialog設(shè)置 :close-on-click-modal="false" , 禁止點擊遮罩層關(guān)閉彈出層
*? 如果是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哀澈；不然縮小時框內(nèi)的標簽可能超出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)=>{// 鼠標按下，計算當前元素距離可視區(qū)的距離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();// 移動時禁用默認事件//左側(cè)鼠標拖拽位置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';}}}//右側(cè)鼠標拖拽位置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';}}};//拉伸結(jié)束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="呼出結(jié)果":visible.sync="dialogOutVisible">...</rrc-dialog>
```)
PS:在main.js 引入之后就是全局變量了，命令可以全局使用适荣；
#存在一個小問題现柠，有些可能還要求能拖拽之后還要能復制里面的內(nèi)容文字什么的 ，我暫時還沒找到解決方法弛矛，
網(wǎng)上找到說可以這樣解決解決拖動的問題够吩，我為了反其道而行，把他變成能選中丈氓，但是不可觀周循。
document.onselectstart = function() { return false; };//解決拖動會選中文字的問題?
各位大佬要是知道怎么解決 技能拖動，又能選中文字復制的話万俗，請告知湾笛，感激不盡！
碼字不容易 喜歡的可以掃碼公共號關(guān)注一波闰歪，有各種福利推送
