vue 学习笔记 【ElementPlus】el-menu 折叠后图标不见了
warning:
这篇文章距离上次修改已过429天，其中的内容可能已经有所变动。
这个问题通常是由于Element Plus的样式没有正确加载或者是CSS的选择器优先级不足以覆盖折叠状态下的图标样式。
解决方法：
- 确保Element Plus样式文件已正确引入。如果你是通过CDN或者npm安装的，检查你的
index.html或main.js文件中是否有正确的样式链接。 - 检查是否有全局样式覆盖了折叠状态下的图标样式。如果有，提高选择器的优先级或者调整覆盖的样式。
- 如果以上方法都不行，可以尝试手动为折叠状态下的图标设置样式，确保它们可见。
示例代码：
/* 确保在折叠状态下菜单图标也可见 */
.el-menu--collapse .el-submenu__icon-arrow {
display: block !important;
}
/* 针对Element Plus 1.x版本，如果是2.x版本，可能需要调整选择器 */
.el-menu--vertical .el-submenu .el-submenu__icon-arrow {
display: block !important;
}确保将这段CSS添加到你的全局样式文件中，并确保它在Element Plus的样式之后加载，以保证优先级。如果你使用的是Vue单文件组件（.vue），可以在<style>标签中添加上述CSS规则。
评论已关闭