1.使用在线el-dialogdragandwide命令,存在以下问题1.1使用命令后,el-table头部可缩放时鼠标样式消失解决el-dialog拖拽,双击头部的功能放大,加宽,加高等,并且没有后遗症(el-dialog的内容不能复制,el-table的mousestylehead加宽会显示问题)/**定义中publicjs,在入口文件main.js中引入;*elementUI的dialog增加v-dialogDrag命令,实现弹窗的全屏和拉伸。*///v-dialogDrag:弹窗拖动+水平拉伸Vue.directive('dialogDrag',{bind(el,binding,vnode,oldVnode){//弹窗框的最小宽高可以被拉伸letminWidth=400;letminHeight=300;//初始非全屏letisFullScreen=false;//当前宽高letnowWidth=0;letnowHeight=0;//当前顶部高度letnowMarginTop=0;//获取弹框头部(这个可以双击全屏)constdialogHeaderEl=el.querySelector('.el-dialog__header');//弹窗constdragDom=el.querySelector('.el-dialog');//给弹窗添加overflowauto;否则缩小时框内的标签可能会超出dialog;dragDom.style.overflow="auto";//清除选择的效果headertextdialogHeaderEl.onselectstart=newFunction("returnfalse");//为headercursor添加可拖动性dialogHeaderEl.style.cursor='move';//获取原始属性即domelement.currentStyleFirefoxGooglewindow.getComputedStyle(dom元素,空);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;文档.onmouseup=null;};}dialogHeaderEl.onmousedown=moveDown;//双击头部效果dialogHeaderEl.ondblclick=(e)=&g吨;{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='初始';dialogHeaderEl.onmousedown=null;}else{dragDom.style.height="auto";dragDom.style.width=nowWidth+'px';dragDom.style.marginTop=nowMarginTop;isFullScreen=false;dialogHeaderEl.style.cursor='移动';dialogHeaderEl.onmousedown=moveDown;}}//拉伸(右下方)letresizeEl=document.createElement("div");dragDom.appendChild(resizeEl);//在弹窗右下角添加上一个10-10px的控制块resizeEl.style.cursor='se-resize';resizeEl.style.position='绝对';resizeEl.style.h八='10px';resizeEl.style.width='10px';resizeEl.style.right='0px';resizeEl.style.bottom='0px';resizeEl.style.zIndex='99';//鼠标拉动ResizeEl.onmousedown=(e)=>{//记录初始x位置letclientX=e.clientX;//计算鼠标按下时当前元素到可见区域的距离letdisX=e.clientX-resizeEl.向左偏移;让disY=e.clientY-resizeEl.offsetTop;document.onmousemove=function(e){e.preventDefault();//移动时禁用默认事件//通过事件委托,计算移动距离设x=e。clientX-disX+(e.clientX-clientX);//由于elementUI的dialog控件在这里居中,水平拉伸效果doublelety=e.clientY-disY;//比较是否小于最小宽高dragDom.style.width=x>最小宽度?`${x}px`:minWidth+'px';dragDom.style.height=y>最小高度?`${y}px`:minHeight+'px';};//拉伸结束document.onmouseup=function(e){document.onmousemove=null;文档.onmouseup=null;};}//拉伸(向右)让resizeElR=document.createElement("div");dragDom.appendChild(resizeElR);//在弹窗右下角添加一个10-10px的控制块resizeElR.style.cursor='w-resize';resizeElR.样式。位置='绝对';resizeElR.style.height='100%';resizeElR.style.width='10px';resizeElR.style.right='0px';resizeElR.style.top='0px';//鼠标拉伸弹窗resizeElR.onmousedown=(e)=>{letelW=dragDom.clientWidth;让EloffsetLeft=dragDom.offsetLeft;//记录初始的x位置letclientX=e.clientX;document.onmousemove=function(e){e.preventDefault();//移动时禁用默认事件//鼠标右键拖动位置if(clientX>EloffsetLeft+elW-10&&clientX
