拖动vue项目修改左右宽度

时间：2023-04-01 01:31:29 vue.js

需求：拖动改变左右宽度实现效果：实现步骤：1.代码left

右侧

2.style.left{width:49.2%;高度：100%；溢出-y：自动；溢出-x：隐藏；float:left;}.resize{cursor:col-resize;向左飘浮;位置：相对；顶部：45%；背景色：#d6d6d6；边界半径：5px；宽度：0.6%；高度：50px；行高：50px；文本对齐：居中；背景尺寸：封面；背景位置：中心；字体大小：0.32rem；color:white;}/*dragAreamouseoverstyle*/.resize:hover{color:#444444;}.right{height:7.8rem;向左飘浮;宽度：50%；}.box{宽度：100%；height:7.8rem;}3.方法dragControllerDiv:function(){varresize=document.getElementsByClassName('resize');varleft=document.getElementsByClassName('left');varmid=文档ment.getElementsByClassName('右');varbox=document.getElementsByClassName('box');for(leti=0;imaxT-150)moveLen=maxT-150;//右侧区域最小宽度为150pxresize[i].style.left=moveLen;//设置左边区域的宽度for(letj=0;j

上一篇：2020年12个Vue.js开发提示和技巧

下一篇：前端“一键换色”的几种解决方案

拖动vue项目修改左右宽度相关文章