Vue3+Element-plus 导航菜单折叠后不显示图标问题解决

最新推荐文章于 2024-07-22 16:49:28 发布
最新推荐文章于 2024-07-22 16:49:28 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： 前端 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37144341/article/details/129955953
版权

使用最新的element plus版本(v2.3.2)写导航菜单时，发现折叠后图标不显示了，最后降低了版本(v2.2.12)可以了，有大佬介绍下什么原因吗。
折叠前：
在这里插入图片描述
降低版本折叠后：
在这里插入图片描述

没有竹蜻蜓的小叮当
关注
专栏目录
elementplus实现左侧菜单栏收缩与展开
南七小僧的学海无涯
08-26 343
isCollapse有两个页面的父级页面Home.vue通过provide注入。Home.vue下包含aside.vue和menu.vue。数据后 ，子页面inject获取，更改后也会具有响应性。
Vue3+Element-Plus 实现左侧菜单折叠与展开功能 二七
m0_67403143的博客
03-06 2914
1.最终实现的效果图 2. 实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来，画按钮条UI结构，实现折叠与展开功能 1. 在侧边栏内部，在侧边栏菜单区域之前，放置一个DIV。 2. 在该DIV上面添加文本，通过点击该DIV，触发菜单折叠与展开 3.通过类选择器，为该DIV 添加相关样式 .toggle-button{ // 添加背景颜色 background-color: #4A5064; // 设置文本大小 font-size:10px;.
vue3+Element-plus icon图标无法显示的问题(已解决)
热门推荐
weixin_52457745的博客
11-24 2万+
项目场景： 在使用vue3+element-puls时,默认的icon图片无法显示的问题 问题描述： 在使用element-plus 1.2.0-beta.3版本时,![在这里插入图片描述](https://img-blog.csdnimg.cn/2e0c4a60c82341f3a0aae98ab5479849.PNG?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAQ2hldCDosa
Vue3+Element-Plus 解决折叠侧边菜单栏后文字不隐藏问题
weixin_58421147的博客
05-09 1820
【代码】Vue3+Element-Plus 解决折叠侧边菜单栏后文字不隐藏问题。
【vue3 element-plus使用el-sub-menu折叠后图标消失问题 】
zhengge417的博客
03-12 2101
更改el-sub-menu的display为grid。有子菜单的图标折叠后消失。
vue 学习笔记 【ElementPlus】el-menu 折叠后图标不见了
xjcwzp的专栏
07-25 2433
解决办法是把icon 从#title 中提取出来。运行过程中，菜单折叠后，图标不见了。
vue3+elementplus实现侧边栏收缩折叠图标显示异常
fu2825666010的博客
08-06 919
侧边栏实现的时候，图标都用的自己的，但是加入后发现，没收缩时可以正常显示，但是折叠的时候，有子菜单的菜单收缩时会不显示图标。解决办法，将自己的图标用<el-icon></el-icon>包裹，图标就可以正常显示了。如图，这是正确的，但是我的有子菜单的菜单收缩时会不显示图标。
ElementPlus里面的menu折叠出现问题
weixin_66130560的博客
03-18 942
ElementPlus里面的menu折叠出现问题，问题原因：当el-menu中只嵌套el-menu-item时，文字需用span或其他标签包裹起来
vue3使用element-plus搭建后台管理系统---菜单管理
07-01
在本项目中，我们主要探讨的是如何利用Vue3框架与Element-Plus库来构建一个后台管理系统，特别是关于菜单管理的部分。Vue3是Vue.js的最新版本，它带来了许多性能优化和开发体验提升的新特性，如Composition API、...
vue3+element-plus侧边栏折叠
09-14
在Vue 3 和 Element Plus 的组合中，要实现侧边栏折叠的效果，可以使用`el-menu`作为根节点，并结合`el-menu-item`和`el-submenu`来构建菜单栏。 首先，在模板中使用`el-menu`作为整个菜单的容器，并设置`collapse`...
ElementPlus「Menu」折叠时无法折叠标题文字
dashenfeng1的博客
06-12 800
可以看到，当隐藏起来的时候，文字无法正常隐藏。
vue 使用element plus 菜单时，折叠文字不消失
weixin_46044574的博客
03-07 641
菜单折叠时，title文本无法消失，同时下拉箭头还会存在。div和p标签都是块级元素，可能是这个原因。所以把项目中的p标签改为span标签。div改为template即可解决。查看项目中是否有div标签。
vue3+elementplus侧边栏图标文字箭头不能正常显示的问题
fu2825666010的博客
07-22 939
elementplus官网的自定义图标没太看明白怎么搞，后来自己研究了个方法。把img包裹在el-icon里，问题解决。起码目前自定义图标正常显示，还未发现问题。要求：实现功能，一个侧边栏，可以进行收缩，一级子菜单图标需要自定义，然后箭头需要改为右下。3.箭头样式修改：网上查了好多比较麻烦，研究后发现其实只调transform属性就可以。1.一级菜单无children但是依然有下拉箭头。后来发现，需要用v-if控制子菜单的显示和隐藏。定义了一个数组进行遍历，发现问题。
vue3项目 使用 element-plus 中 el-collapse 折叠面板
lzfengquan的博客
04-16 2319
我这里还用到了 el-steps ，最外层的 是自己写的样式，因为我一个页面中使用了两次el-steps ，发现样式会有干扰。最近接触拉了一个项目，使用到 element-plus 中 el-collapse 折叠面板，发现在使用中利用高官网多多少少的会出现问题。效果图 ： 当点击 了查看按钮时，弹框出现，且默认展开第一个数据，且每次的展开或者收起都有对应的样式，可见下图左侧的图样，我们的数据结构是双数组，如果你和我一样直接copy, 如果是一个对象数组或者数组吧，只需把外层的数组转化即可。
Element Plus 表格操作栏折叠，复制即用~
最新发布
qq_35556763的博客
07-22 274
Element Plus 表格操作栏折叠，复制即用~
Elementui 折叠导航(展开收起变成icon图标)如何实现
cjj123580的博客
06-29 880
【代码】Elementui 折叠导航(展开收起变成icon图标)如何实现。
vue3 tsx element plus导航栏封装
Feast_aw的博客
05-29 362
【代码】vue3 tsx element plus form表单校验
Element-Plus左侧导航条收缩二级菜单图标不显示
m0_55370389的博客
01-07 1377
Element-Plus左侧导航条收缩二级菜单图标不显示
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值