vue项目左右布局(右侧布局是iframe) 中分线可拖拽及卡顿问题解决

image.png

功能需求:页面左右布局,左边初始定宽512px,右侧宽度 flex:1,分割线中间有拖拽按钮,拖拽时 左侧的宽度最大宽度是现在宽度+现在宽的的50%。最小宽度是初始宽度的一半 。

解决思路:在mounted生命周期,监听分割线DOM的onmousedown事件,在拖拽过程中动态计算,然后赋值改变左右DOM元素的宽度。

实现代码:(class类里用的tailwindcss)


 
左侧内容区
{this.envHost &&