vben中通过自定义指令 实现边界拖拽

注意 当前写法是在vben中实现 若使用其他前端模板 只需要更改第二步 注册方式即可问题描述项目中经常遇到某些上下结构或者左右结构的排版 其中某些元素需要边界拖拽以实现其他元素的展示常见场景业务上需要是左树右列表的页面 树节点title过长时无法全部展示 通过边界拖拽 可以更友好的展示树节点的信息第一步 创建边界拖拽自定义指令文件文件地址src\directives\dragResize.tsimporttype{Directive,App}fromvue;constdragResizeDirective:Directive{mounted(el:HTMLElement,binding){constsideArr[right,left,top,bottom];constminSizebinding.value?.minSize||100;constmaxSizebinding.value?.maxSize||1000;constdragSize5;constoriCurel.style.cursor;// 解析需要拖拽的边constsidesbinding.value?.replace(/\s/g,).split(,)||[right];constdragable:Recordstring,boolean{};for(constsideofsides){if(!sideArr.includes(side)){thrownewError(resizable needs string value of: sideArr);}dragable[side]true;}letdragSide;letdraggingfalse;// 辅助函数获取鼠标相对于 el 的坐标constgetMousePos(e:MouseEvent){constrectel.getBoundingClientRect();return{x:e.clientX-rect.left,y:e.clientY-rect.top,width:rect.width,height:rect.height,};};el.addEventListener(mousemove,(e:MouseEvent){if(dragging)return;const{x,y,width,height}getMousePos(e);if(dragable.rightwidth-xdragSize){el.style.cursorcol-resize;dragSideright;}elseif(dragable.leftxdragSize){el.style.cursorcol-resize;dragSideleft;}elseif(dragable.topydragSize){el.style.cursorrow-resize;dragSidetop;}elseif(dragable.bottomheight-ydragSize){el.style.cursorrow-resize;dragSidebottom;}else{el.style.cursororiCur;dragSide;}});el.addEventListener(mousedown,(e:MouseEvent){if(!dragSide)return;draggingtrue;const{width,height}getMousePos(e);constelWwidth;constelHheight;constclientXe.clientX;constclientYe.clientY;constmovefun(e:MouseEvent){e.preventDefault();if(dragSideright(e.clientXclientX||el.offsetWidthminSize)){constnewWidthelW(e.clientX-clientX);el.style.widthMath.min(newWidth,maxSize)px;}elseif(dragSideleft(e.clientXclientX||el.offsetWidthminSize)){constnewWidthelW(clientX-e.clientX);el.style.widthMath.min(newWidth,maxSize)px;}elseif(dragSidetop(e.clientYclientY||el.offsetHeightminSize)){constnewHeightelH(clientY-e.clientY);el.style.heightMath.min(newHeight,maxSize)px;}elseif(dragSidebottom(e.clientYclientY||el.offsetHeightminSize)){constnewHeightelH(e.clientY-clientY);el.style.heightMath.min(newHeight,maxSize)px;}};constremovefun(){draggingfalse;document.removeEventListener(mousemove,movefun);document.removeEventListener(mouseup,removefun);};document.addEventListener(mousemove,movefun);document.addEventListener(mouseup,removefun);});},};exportfunctionsetupDragResizeDirective(app:App){app.directive(drag-resize,dragResizeDirective);}exportdefaultdragResizeDirective;第二步 在统一自定义指令注册ts中注册边界拖拽指令文件地址src\directives\index.ts或参考 vue官网自定义指令 注册全局自定义指令第三步 使用在需要使用边界指令的元素上添加 v-drag-resizedivstyledisplay: flexdiv v-drag-resize树/divdivstyleflex: 1列表/div/div注意将其父元素设置成弹性盒模型给其兄弟元素设置属性flex: 1