Vue项目中如何实现拖拽分界线自适应布局？

最近在项目开发中遇到一个需求：页面左右布局，需要拖拽分割线实现宽度自动适配。一般来说，解决方法是在mounted生命周期监听分界线DOM的onmousedown事件，在拖动过程中动态计算，然后赋值改变左右DOM元素的宽度，你'重做。模板部分：类是“touch-div”是分割线DOM。CSS部分：cursor:col-resize;实现鼠标悬停时的左右箭头。.wrap.lf.touch-div{位置：绝对；顶部：0；高度：100%；左：100%；宽度：20px；显示：弹性；证明内容：居中；对齐项目：居中；光标：col-resize;}.wrap.lf.touch-divspan{宽度：2px;背景：#bbb；边距：02px；height:15px;}JavaScript部分exportdefault{name:"App",data(){return{letfDom:null,clientStartX:0};},mounted(){this.letfDom=this.$refs.letfDom;让moveDom=this.$refs.moveDom;moveDom.onmousedown=e=>{this.clientStartX=e.clientX;e.preventDefault();document.onmousemove=e=>{this.moveHandle(e.clientX,this.letfDom);};document.onmouseup=e=>{document.onmouseup=null;文档.onmousemove=null;};};},方法：{moveHandle(nowClientX,letfDom){letcomputedX=nowClientX-this.clientStartX;让leftBoxWidth=parseInt(letfDom.style.width);让陈geWidth=leftBoxWidth+computedX;如果（变化宽度<280）{变化宽度=280；}if(changeWidth>400){changeWidth=400;}letfDom.style.width=changeWidth+"px";this.clientStartX=now}}ClientX;};示例代码下载可以复制以上代码运行看看效果，也可以从GitHub下载：https://github.com/Jackyyans/code123，更多示例会持续更新，欢迎关注