vue项目中怎么实现el-dialog组件可拖拽效果(el-dialog,vue,开发技术)

0. 首先上图，看效果

1. 实现方法

第一步：创建 drag.js文件 实现拖拽源码

/***拖拽移动*@param{elementObjct}bar鼠标点击控制拖拽的元素*@param{elementObjct}target移动的元素*@param{function}callback移动后的回调*/exportfunctionstartDrag(bar,target,callback){varparams={top:0,left:0,currentX:0,currentY:0,flag:false,cWidth:0,cHeight:0,tWidth:0,tHeight:0};//给拖动块添加样式bar.style.cursor='move';//获取相关CSS属性//o是移动对象//vargetCss=function(o,key){//returno.currentStyle?o.currentStyle[key]:document.defaultView.getComputedStyle(o,false)[key];//};bar.onmousedown=function(event){//按下时初始化paramsvare=event?event:window.event;params={top:target.offsetTop,left:target.offsetLeft,currentX:e.clientX,currentY:e.clientY,flag:true,cWidth:document.body.clientWidth,cHeight:document.body.clientHeight,tWidth:target.offsetWidth,tHeight:target.offsetHeight};//给被拖动块初始化样式target.style.margin=0;target.style.top=params.top+'px';target.style.left=params.left+'px';if(!event){//防止IE文字选中bar.onselectstart=function(){returnfalse;}}document.onmousemove=function(event){//防止文字选中window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();vare=event?event:window.event;if(params.flag){varnowX=e.clientX;varnowY=e.clientY;//差异距离vardisX=nowX-params.currentX;vardisY=nowY-params.currentY;//最终移动位置varzLeft=0;varzTop=0;zLeft=parseInt(params.left)+disX;//限制X轴范围if(zLeft<=-parseInt(params.tWidth/2)){zLeft=-parseInt(params.tWidth/2);}if(zLeft>=params.cWidth-parseInt(params.tWidth*0.5)){zLeft=params.cWidth-parseInt(params.tWidth*0.5);}zTop=parseInt(params.top)+disY;//限制Y轴范围if(zTop<=0){zTop=0;}if(zTop>=params.cHeight-parseInt(params.tHeight*0.5)){zTop=params.cHeight-parseInt(params.tHeight*0.5);}//执行移动target.style.left=zLeft+'px';target.style.top=zTop+'px';}if(typeofcallback=="function"){callback(zLeft,zTop);}}document.onmouseup=function(){params.flag=false;document.onmousemove=null;document.onmouseup=null;};};}

第二步：新建 directive.js 文件，创建vue指令配置文件

//引入拖拽jsimport{startDrag}from'./drag.js'/***为el-dialog弹框增加拖拽功能*@param{*}el指定dom*@param{*}binding绑定对象*desc只要用到了el-dialog的组件，都可以通过增加v-draggable属性变为可拖拽的弹框*/constdraggable=(el,binding)=>{//绑定拖拽事件[绑定拖拽触发元素为弹框头部、拖拽移动元素为整个弹框]startDrag(el.querySelector('.el-dialog__header'),el.querySelector('.el-dialog'),binding.value);};constdirectives={draggable,};//这种写法可以批量注册指令exportdefault{install(Vue){Object.keys(directives).forEach((key)=>{Vue.directive(key,directives[key]);});},};

第三步：main.js文件中全局引入vue指令

/*注册全局指令*/importdirectivefrom'./utils/directive';Vue.use(directive)第四步：使用v-draagble<el-dialogv-draggabletitle="新增":visible.sync="isShow"@close="handleCancelConfigInfo"><--xxxx弹框内容...--></el-form><divslot="footer"><el-buttonsize="small">取消</el-button><el-buttonsize="small">保存</el-button></div></el-dialog>

注意事项

文件引入路径需前后保持一致