Vue3中使用element-plus菜单折叠后文字不消失

最新推荐文章于 2024-06-14 10:39:01 发布
最新推荐文章于 2024-06-14 10:39:01 发布
阅读量685 收藏
点赞数 13
分类专栏： 前端(Vue/Javascript) 文章标签： vue.js 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58626489/article/details/136039194
版权

今天使用element-plus中国的导航菜单时，发现菜单栏折叠起来时文字不会自动消失，因为element-plus中内置了菜单折叠文字自动消失的，使用collapse=true/false即可，但在实际使用中出现了一下问题：

折叠以后文字并没有消失，查资料说是el-menu子标签中不能含有div，但是排查了后也没有使用div，最后发现是因为我的一级导航没有包裹到标签中，因为是直接使用了一个简易的非折叠导航栏，折叠是后边加上去的，所以忽略了这个问题。这一部分写在了标签外面。

使用span包裹一下就好了

浮生若梦777
关注
  • 13
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
Vue3+Element-Plus 解决折叠侧边菜单栏后文字不隐藏问题
weixin_58421147的博客
05-09 1536
【代码】Vue3+Element-Plus 解决折叠侧边菜单栏后文字不隐藏问题。
vue 使用element plus 菜单时，折叠文字不消失
weixin_46044574的博客
03-07 496
菜单折叠时，title文本无法消失，同时下拉箭头还会存在。div和p标签都是块级元素，可能是这个原因。所以把项目中的p标签改为span标签。div改为template即可解决。查看项目中是否有div标签。
vue使用el-menu折叠时，导航文字不隐藏问题
qq_40580023的博客
12-31 7862
问题截图 这是由于由于 element-ui 的导航菜单的原因，在el-submenu 外层加了 div时，收折就隐藏不了文字。 解决方式一：可以自己在加css样式隐藏； 解决方式二：不使用div，把div改为<template>即可 ...
关于vue3使用Elementplus的抽屉时出现抽屉内文本内容不能显示的问题
2201_75635610的博客
02-03 275
文本字体默认和文本框颜色一样，导致看不出来，实际上是有的，只是文本颜色重叠看不出来，在容器里改一下color就好啦！
vue3使用element elpus 组件库中的menu组件，collapse不折叠
poguanba的博客
09-20 243
遇到这种情况的话，直接将menu自己封装的这个组件里面的最外层的div删掉就ok了。就很难评，后面发现其实是需要将图标拿出来就好了，emmmm...，好了一半。我的情况是这样的，动态创建路由，项目参照尚硅谷的教学视频。menu自己封装的组件。
element-Plus中el-menu菜单无法正常收缩解决方案
c_qianxia5040的博客
08-17 1091
从代码对比看层级就不太对了，嵌套错误了，正常下方官网的ul标签下直接是li，在自己的代码中，ul标签下是div标签，层级嵌套错误，导致无法正常收缩。如图所示收缩之后，有子级的菜单还有箭头文字显示。
elementui-plus中使用图标和文字在collapse折叠收缩的时候显示出问题
qq_44213979的博客
08-01 1654
代码不要写错了，template只装span,图放外边 <el-menu-item index="/homeview" route="/homeview"> <el-icon><Menu /></el-icon> <template #title> <span>主控台</span
vue3使用element-plus搭建后台管理系统---菜单管理
07-01
vue3使用element-plus搭建后台管理系统---菜单管理
element-ui 设置菜单栏展开的方法
01-21
element-ui 侧边栏默认要全部展开怎么做？ element-ui文档中是这么写的 default-openeds 当前打开的sub-menu的key数组 给<el></el>标签加上这个属性 <el class=el-menu-vertical open=handleOpen close=handleClose theme=dark default-openeds=openeds> openeds需要在data里面定义一下 openeds是一个数组（当前打开的sub-menu的 key 数组） data () { retur
Vue3 框架 + Element-Plus 库 + mockjs 假数据 + vue3-demo + 环境已经配好拿来就用
07-06
内容概要：该 Vue3-demo 是基于 Vue3 框架搭配 Element-Plus ui库，建立的简单工程，并搭建了 Mockjs 和 axios工具，可以快速开发的工程，已经成功引入并建立了一个基于 Element-Plus 库中 table 组件的页面;...
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...
[vue3] 菜单动态折叠效果
沫洺的博客
09-17 2151
🎫菜单动态折叠效果
el-submenu折叠失效，文字和＞显示
程序员劝退师的博客
05-23 4944
先看问题效果 这里的el-menu中的:collapse已经设置为true了，但是文字和>还是显示了出来，而且悬浮上去确实也有折叠时的效果如下。 这里研究了一下，发现只要我把el-submenu直接放入到el-menu中是可以的，但是实际业务中做动态路由的时候会带着菜单项也为动态的，那么基本上就会吧菜单项抽离为组件然后循环渲染，但是由于 element-ui 的<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,&l
element-ui 循环渲染侧边导航时，折叠展开时字不隐藏
m0_46678928的博客
04-14 1475
element-ui 循环渲染侧边导航时，折叠展开时字不隐藏
elementUI侧边栏折叠后图标不显示文字不隐藏问题
luback的博客
06-02 1226
标签中的的图标和标题，不要。只需要注意两个细节地方。下的图标和标题，不要。
左侧菜单导航折叠后文字没有完全隐藏
m0_67841039的博客
10-25 1087
左侧菜单栏无法折叠的问题
关于element-plus中el-select自定义标签及样式的问题
最新发布
x_XDGS的博客
06-14 282
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
vue3中怎么将element-plus的折叠面板中箭头改到左侧
05-26
在 Element Plus 的折叠面板中，箭头默认是在右侧的。如果想要将箭头改到左侧，可以通过修改 CSS 样式来实现。具体步骤如下： 1. 在组件中设置 `collapse-icon-position` 属性为 `left`，这会让折叠面板中的文字和箭头都靠左对齐。 ```html <el-collapse v-model="activeNames" collapse-icon-position="left"> <el-collapse-item title="折叠面板 1" name="1"> 内容 1 </el-collapse-item> <el-collapse-item title="折叠面板 2" name="2"> 内容 2 </el-collapse-item> </el-collapse> ``` 2. 修改箭头的样式。在 CSS 中添加以下代码，将箭头的位置从右侧移到左侧： ```css .el-collapse-item__arrow { left: 20px; right: auto; } ``` 这里将箭头的 `left` 属性设为 `20px`，可以根据实际情况调整位置。同时将 `right` 属性设为 `auto`，取消箭头原有的右侧定位。 完整的代码如下： ```html <template> <el-collapse v-model="activeNames" collapse-icon-position="left"> <el-collapse-item title="折叠面板 1" name="1"> 内容 1 </el-collapse-item> <el-collapse-item title="折叠面板 2" name="2"> 内容 2 </el-collapse-item> </el-collapse> </template> <style> .el-collapse-item__arrow { left: 20px; right: auto; } </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浮生若梦777

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值