坑41【暂未填,记录于2021.8.6,对应踩坑记12 踩坑记12 vuex4 module 命名空间 | el-menu 文字超范围显示_Alloom的博客-优快云博客 】(el-menu、collapse、el-aside、折叠动画):目前将el-menu嵌套在el-aside中的,el-aside的宽度根据菜单的折叠情况,设置为64px或220px。观察实际渲染的菜单元素,折叠到展开其宽度是瞬变;而在展开转变为折叠时,根据el-menu的collapse-transition属性,true(默认)宽度慢慢变小,false瞬变。
于是一开始的目标使el-aside的宽度随el-menu的宽度变化,提升显示效果的动态感。但之后发现el-menu是非原始元素,使用ref或window.getComputedStyle都无法获取其宽度。
附相关参考: Vue获取元素的宽高_meoncih_的博客-优快云博客_vue获取元素宽度
因此改变目标:对el-aside添加折叠/展开动画,尽量配合el-menu的折叠/展开速度,达成类似效果。动画效果非必要,之后再做。
坑60【已填,记录于2021.9.1,填坑于2021.9.2】(el-form、inline模式、元素高度不统一、元素垂直间距不统一),详见踩坑记18 踩坑记18 vue 组件折叠 v-show | 深度合并对象 deepmerge | el-checkbox-group size设置无效 | el-form中元素高度、垂直间距不统一_Alloom的博客-优快云博客
by 莫得感情踩坑机(限定)
更新记录:
挖坑41,2021.8.6
挖坑60,2021.9.1
填坑60,2021.9.2
该博客记录了如何解决Vue项目中el-aside宽度跟随el-menu折叠状态变化的问题,以及遇到的非原始元素宽度获取问题,最终转向通过添加动画效果来模仿菜单折叠展开过程。同时提及了对el-form组件元素高度和间距的一次调整经验。

被折叠的 条评论
为什么被折叠?



