element-ui对话框可拖拽，边界处理要满足业务需求。需要实现对话框的可拖动问题。Element-ui官方没有提供支持，所以参考了大师的文章，得出了贴合业务需求的方案。很多大神给出的代码都没有解决边界问题，但是有一个bug没有解决边界问题。拖到隐形区后面就再也回不来了。如果你不相信我，你可以试试。在实现功能的情况下，封装成一个js文件，然后在main.js中引入后就可以全局使用了。让我们来看代码。函数实现代码directives.js代码如下：importVuefrom'vue';//v-dialogDrag:弹出窗口拖动属性Vue.directive('dialogDrag',{bind(el,binding,vnode,oldVnode){constdialogHeaderEl=el.querySelector('.el-dialog__header');constdragDom=el.querySelector('.el-dialog');//dialogHeaderEl.style.cursor='move';dialogHeaderEl.style.cssText+=';cursor:move;'dragDom.style.cssText+=';top:0px;'//获取原始属性即domelement.currentStyleFirefoxGooglewindow.getComputedStyle(domelement,null);conststy=(function(){if(window.document.currentStyle){return(dom,attr)=>dom.currentStyle[attr];}else{return(dom,attr)=>getComputedStyle(dom,false)[attr];}})()dialogHeaderEl.onmousedown=(e)=>{//鼠标按下，计算当前元素到可见区域的距离constdisX=e.clientX-dialogHeaderEl.offsetLeft;constdisY=e.clientY-dialogHeaderEl.offsetTop;constscreenWidth=document.body.clientWidth;//body的当前宽度constscreenHeight=document.documentElement.clientHeight;//可见区域高度（应该是bodyheight，但是在某些环境下获取不到）constdragDomWidth=dragDom.offsetWidth;//对话框宽度constdragDomheight=dragDom.offsetHeight;//对话框高度constminDragDomLeft=dragDom.offsetLeft;constmaxDragDomLeft=screenWidth-dragDom.offsetLeft-dragDomWidth;常量minDragDomTop。偏移顶部；constmaxDragDomTop=screenHeight-dragDom.offsetTop-dragDomheight;//获取带px正则匹配替换的值letstyL=sty(dragDom,'left');让styT=sty(dragDom,'top');//注意ie中第一次获取的值在组件自带50%移动后赋值给pxif(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=function(e){//通过事件委托，计算移动距离letleft=e.clientX-disX;让top=e.clientY-disY;//边界处理if(-(left)>minDragDomLeft){left=-(minDragDomLeft);}elseif(left>maxDragDomLeft){left=maxDragDomLeft;}如果（-（顶部）>minDragDomTop）{顶部=-(minDragDomTop);}elseif(top>maxDragDomTop){top=maxDragDomTop;}//移动当前元素dragDom.style.cssText+=`;left:${left+styL}px;top:${top+styT}px;`;};document.onmouseup=function(e){document.onmousemove=null;文档.onmouseup=null;};}}})在边界处理中，因为在我的项目中无法获取body的高度（被这个折腾了好久），所以取了可见区域的高度，这里补充一些知识文档。body.clientWidth//BODY对象宽度document.body.clientHeight//BODY对象高度document.documentElement.clientWidth//可见区域宽度document.documentElement.clientHeight//可见区域高度在main.js中引入//Dialog即可被拖拽，注意文件所在的目录还没有找到引入的顺序，如果有，添加import'./directives.js';在ue文件中使用：在el-dialog标签中添加v-dialogDrag属性
