el-menu折叠后菜单图标消失问题

已于 2024-07-08 15:02:41 修改
阅读量320 收藏
点赞数 3
分类专栏： bug 文章标签： bug 前端 vue
于 2024-07-08 15:00:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54895565/article/details/140269085
版权

问题：使用el-menu时，折叠菜单图标渲染不出来，

问题原因：el-icon放在了title插槽里边导致

处理：

dkzcm
关注
专栏目录
避免在 Element Plus el-sub-menu 组件中使用 ＜span＞ 标签添加图标的注意事项
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
01-02 673
Element Plus 是一个功能强大的基于 Vue.js 的 UI 组件库，提供了各种组件来简化 Web 应用程序的开发过程。其中 el-sub-menu 组件是用于创建复杂菜单结构的重要组件之一。然而，在使用 el-sub-menu 组件时，需要留意一个关键问题：避免在 标签内添加图标，因为这可能导致折叠菜单时图标消失。本文将探讨这一问题，并提供解决方案以确保良好的用户体验。
vue.js+element-ui动态配置菜单的实例
10-18
对于有子菜单的菜单项，可以使用 `<el-submenu>` 组件，而没有子菜单的则使用 `<el-menu-item>`。`v-if` 指令用于根据菜单项的 `hidden` 属性决定是否显示。 4. **图标展示**： 菜单项的图标可以通过 `item....
使用el-menu，菜单折叠后悬浮菜单不出现以及图标不显示的可能原因
Boneex的博客
05-22 4623
使用element-plus组件el-menu遇到的图标不显示，悬浮框不出现问题的解决方案
vue—菜单栏自适应折叠
小灰灰
08-01 4115
vue—菜单栏自适应折叠
vue使用elementui的el-menu的折叠菜单collapse
weixin_49931650的博客
12-02 2249
由于我的是在el-menu所在组件外面的兄弟组件设置是否折叠的控制，我用事件总线bus进行是否折叠传递。就是如此，有疑问评论区见。
随笔——elmentUI的组件使用遇到的一些问题
SundayGoG的博客
08-19 1213
伸缩折叠抖动问题、折叠后菜单文字依然显示、折叠后el-aside区域没有相应折叠
el-menu折叠问题
qq_60208156的博客
04-21 494
el-side侧边栏需要设置 width: auto;el-menu中嵌套了其他标签，如div。折叠时title文字未隐藏原因。
后台管理----菜单折叠展开
weixin_51614564的博客
08-16 1425
后台管理实现左侧菜单栏的折叠与展开
NavMenu-template：导航菜单非常流畅，即会根据设备的屏幕宽度更改其形状
02-15
对于导航菜单来说，这意味着在小屏幕上，菜单可能会折叠成一个汉堡菜单（三横线图标），而在大屏幕上则可以显示为水平排列的链接列表。这种变化旨在确保用户无论在哪种设备上都能方便地访问菜单项。 这个"NavMenu-...
Vue2(三)实现子菜单展开收缩，带动画效果实现方法
11-26
在Vue2中，创建具有动画效果的交互式子菜单已经成为提升用户体验的重要方面。本文将详细介绍如何利用CSS3的过渡（transition）属性和max-height样式来实现一个优雅的展开与收缩子菜单的效果。这种方法不仅能够满足...
ElementUI顶部菜单响应式方案
06-04
在这个组件中，可以利用Vue的计算属性和监听器来动态改变菜单的状态，例如根据窗口宽度判断是否需要折叠菜单。 在`public`目录下，一般存放静态资源，如HTML入口文件、图标等。虽然在响应式菜单实现中这部分可能...
侧边展开收缩菜单结构清晰
10-16
一个结构清晰的菜单应该有逻辑的分类，明确的标题，以及一致的视觉指示（如图标或颜色），来帮助用户理解菜单项之间的关系。 首先，我们来看看`collapsed.gif`和`expanded.gif`这两个文件。它们很可能是展示菜单在...
【VUE项目实战】19、实现侧边栏折叠与展开功能
热门推荐
程序猿之洞
11-09 1万+
接上篇《18、左侧菜单格式美化》 上一篇我们美化了左侧菜单的样式、图标等效果，本篇我们来实现左侧菜单的折叠与展开的效果。 我们要实现的最终效果图： 首先我们先来新增一个用于这点的横向长条，在侧标栏和左侧菜单之前添加一个div，类名为“toggle-button”，然后在div中添加“|||”三个竖杠，作为可以折叠的图例： <el-container> <!-- 侧边栏 --> <el-aside width="200px"> <!-- 折...
[vue3] 菜单动态折叠效果
沫洺的博客
09-17 2473
🎫菜单动态折叠效果
VUE的菜单导航折叠
trf54321的博客
03-06 1108
当idCollapse 为true的时候，这里的small 设置的样式就会生效，同时这个icon图标（向右）的显示由这个 is-Collapse的值（只有为true才会变化向右的图标）来控制。:class="{small:isCollapse} //这个是为了使得在折叠的时候，按钮的显示不被覆盖，所以绑定一个padding-left:64px,只有isCollapse 为 true的时候这个属性才会生效。子组件的isCollapse的值由父组件默认传递，开始都是父组件所设置的值也就是false。
动态el-menu,折叠文字不隐藏、菜单导航折叠后文字不隐藏
yuguang的博客
09-14 4755
1.动态菜单（递归模式） <template> <div> <template v-for="menu in menuTreeData"> <!-- 包含子节点 --> <el-submenu v-if="menu.children" :key="menu.menuUrl" :index="menu.menuUrl"> <template slot="title">
element plus的菜单组件el-menu折叠菜单图标问题总结
最新发布
shoping110的博客
08-02 647
element plus的菜单组件el-menu折叠菜单图标问题总结
左侧菜单导航折叠后文字没有完全隐藏
m0_67841039的博客
10-25 1188
左侧菜单栏无法折叠的问题
el-menu无限层菜单 样式
07-20
1. **默认样式**：无限级菜单通常会采用递归折叠的方式显示，当菜单层级过深时，不会全部展开，而是显示一个下拉箭头，点击后可以展开到指定层级。元素会有hover状态和active状态，分别表示鼠标悬停和选中状态。 2....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值