网站开发完没人运营,平度网站整站优化外包公司,办公软件,成都网站建设蜀美网络今天开工了#xff0c;其实还沉浸在过年放假的喜悦中……今天在自己写 Vue3 的项目#xff0c;虽说是跟着 B 站在敲#xff0c;但是依旧是踩了一些个坑#xff0c;就离谱……照着敲都能踩到坑#xff0c;我也是醉了…… 此为第四篇#xff08;2024 年 02 月 18 日#x… 今天开工了其实还沉浸在过年放假的喜悦中……今天在自己写 Vue3 的项目虽说是跟着 B 站在敲但是依旧是踩了一些个坑就离谱……照着敲都能踩到坑我也是醉了…… 此为第四篇2024 年 02 月 18 日 问题一 问题背景在使用 Vue3 的 UI 组件库 Element Plus 的菜单折叠时菜单折叠了但是菜单的标题和右边的箭头并没有折叠。 问题描述算了不描述了直接上代码吧…… 代码片段
!-- 父组件 --
el-menu background-color#001529 text-colorwhite :default-active$route.path:collapsesettingStore.isCollapseMenu :menu-listrouterStore.menuRoutes/Menu
/el-menu!-- 子组件 --
templatedivtemplate v-foritem in menuList :keyitem.pathtemplate v-if!item.childrenel-menu-item v-if!item.meta.hidden :indexitem.path clickgoRouteel-iconcomponent :isitem.meta.icon/component/el-icontemplate #titlespan{{ item.meta.title }}/span/template/el-menu-item/templatetemplate v-ifitem.children item.children.length 1el-menu-item v-if!item.meta.hidden :indexitem.children[0].path clickgoRouteel-iconcomponent :isitem.children[0].meta.icon/component/el-icontemplate #titlespan{{ item.children[0].meta.title }}/span/template/el-menu-item/templateel-sub-menu v-ifitem.children item.children.length 1 :indexitem.pathtemplate #titleel-iconcomponent :isitem.meta.icon/component/el-iconspan{{ item.meta.title }}/span/templateMenu :menu-listitem.children/Menu/el-sub-menu/template/div
/template效果截图 在这里我们看到isCollapse 已经是 true 折叠状态了但是他的文字和箭头并没有隐藏。 分析过程 这里看了一下官方的文档发现 el-sub-menu 里面的默认插槽直接是 SubMenu / Menu-Item / Menu-Item-Group 这几种但是因为我封装成为了组件所以在外层多了一个 div 去掉外层这个 div 是可以正常显示的。 但是想了想我们是不是可以使用样式穿透手动将这两个内容设置为 display: none; 呢于是我试了一下是可以的。
所以这里我给出两个方案 去掉子组件最外层的 div 让 el-menu-item 直接暴露在 el-sub-menu 下。 使用样式穿透
::v-deep .el-menu--collapse .el-sub-menu__title span {display: none;
}
::v-deep .el-menu--collapse .el-sub-menu__icon-arrow {display: none;
}以上两种方案都可以解决这个问题至于还有没有其他方案我就不得而知了大家有兴趣的可以研究一下发在评论区我们一起讨论。
声明
作者只记录自己在公司踩过的坑以及提供自己的解决思路如果有误请联系作者进行修改不接受以任何形式的诋毁谩骂。如果有更好的方案也可以联系作者进行讨论互相学习。
如需转载请注明文章来源。
