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

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

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

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

使用span包裹一下就好了

Vue3+Element-Plus 解决折叠侧边菜单栏后文字不隐藏问题
weixin_58421147的博客
05-09 2129
【代码】Vue3+Element-Plus 解决折叠侧边菜单栏后文字不隐藏问题。
Vue3+Element-Plus 实现左侧菜单折叠与展开功能 二七
m0_67403143的博客
03-06 3142
1.最终实现的效果图 2. 实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来，画按钮条UI结构，实现折叠与展开功能 1. 在侧边栏内部，在侧边栏菜单区域之前，放置一个DIV。 2. 在该DIV上面添加文本，通过点击该DIV，触发菜单折叠与展开 3.通过类选择器，为该DIV 添加相关样式 .toggle-button{ // 添加背景颜色 background-color: #4A5064; // 设置文本大小 font-size:10px;.
vue3在使用element-plusCollapse 折叠面板时，文字未折叠的情况
weixin_43671292的博客
08-07 504
经查询发现是多嵌套一层div，导致样式失效。去除div之后，折叠正常显示。如图所示，文字未被折叠。
vue 使用element plus 菜单时，折叠文字不消失
weixin_46044574的博客
03-07 843
菜单折叠时，title文本无法消失，同时下拉箭头还会存在。div和p标签都是块级元素，可能是这个原因。所以把项目中的p标签改为span标签。div改为template即可解决。查看项目中是否有div标签。
【Vue+Element】菜单导航折叠后文字不隐藏
liubangbo的专栏
10-13 1944
出现这个问题是因为我们在嵌套中出现了意料之外的,而标签本身希望里面嵌套的是,,其中之一。"parentName": "个人管理","menuName": "钱包管理","parentName": "系统管理","parentName": "密码管理","parentName": "密码管理","menuName": "菜单管理","menuName": "个人管理",
vue使用el-menu折叠时，导航文字不隐藏问题
qq_40580023的博客
12-31 8593
问题截图 这是由于由于 element-ui 的导航菜单的原因，在el-submenu 外层加了 div时，收折就隐藏不了文字。 解决方式一：可以自己在加css样式隐藏； 解决方式二：不使用div，把div改为<template>即可 ...
element-menu 折叠还遗留文字问题解决方案
weixin_46051153的博客
02-24 667
element-menu 折叠还遗留文字问题解决方案
vue3使用element-plus搭建后台管理系统---菜单管理
07-01
在本项目中，我们主要探讨的是如何利用Vue3框架与Element-Plus库来构建一个后台管理系统，特别是关于菜单管理的部分。Vue3是Vue.js的最新版本，它带来了许多性能优化和开发体验提升的新特性，如Composition API、...
vue组件库element-plus快速了解
Ataoker的博客
01-11 1202
闲来无事，体验element-plus 组件库
vue3 应用element plus 实现菜单无限级
qq_35191010的博客
04-06 3635
vue3中实现无限极菜单
vue Element左侧无限级菜单实现
01-19
最近项目中,要用到element-ui的无限级分类菜单，根据角色生成不同的递归数据，查阅了网上很多资料，发现很多都不太完整并且没有很多的延伸性。 梳理递归数据 我们一般拿到后台的数据是：1.扁平化数据格式2.递归式...
element ui 多级菜单文字不隐藏
qq_45690761的博客
05-31 533
VUE element ui使用menuNav组件折叠时文字不隐藏解决方式： 原代码： <el-menu default-active="1" background-color="#304156" class="el-menu-vertical-demo" :collapse="this.$store.state.iscollapse" menu-trigger="click"
elementui-plus中使用图标和文字在collapse折叠收缩的时候显示出问题
qq_44213979的博客
08-01 1880
代码不要写错了，template只装span,图放外边 <el-menu-item index="/homeview" route="/homeview"> <el-icon><Menu /></el-icon> <template #title> <span>主控台</span
elementUI侧边栏折叠后图标不显示文字不隐藏问题
luback的博客
06-02 1520
标签中的的图标和标题，不要。只需要注意两个细节地方。下的图标和标题，不要。
左侧菜单导航折叠后文字没有完全隐藏
m0_67841039的博客
10-25 1234
左侧菜单栏无法折叠的问题
ElementPlus「Menu」折叠时无法折叠标题文字
dashenfeng1的博客
06-12 974
可以看到，当隐藏起来的时候，文字无法正常隐藏。
element-Plus中el-menu菜单无法正常收缩解决方案
c_qianxia5040的博客
08-17 1647
从代码对比看层级就不太对了，嵌套错误了，正常下方官网的ul标签下直接是li，在自己的代码中，ul标签下是div标签，层级嵌套错误，导致无法正常收缩。如图所示收缩之后，有子级的菜单还有箭头文字显示。
elementplus实现左侧菜单栏收缩与展开
热门推荐
黎小小的博客
08-28 1万+
Home.vue下包含aside.vue和menu.vue。
动态el-menu,折叠文字不隐藏、菜单导航折叠后文字不隐藏
yuguang的博客
09-14 4945
1.动态菜单（递归模式） <template> <div> <template v-for="menu in menuTreeData"> <!-- 包含子节点 --> <el-submenu v-if="menu.children" :key="menu.menuUrl" :index="menu.menuUrl"> <template slot="title">
vue3 element-plus折叠
最新发布
02-22
### 使用 Element Plus 在 Vue 3 中实现折叠面板 #### 属性 (Props) - `modelValue` 或者 `v-model`: 绑定值，表示当前激活的面板名称或索引。支持双向数据绑定[^1]。 - `accordion`: 布尔型属性，设置为 true 则每次只打开一个面板。 ```html <template> <el-collapse v-model="activeNames"> <!-- 面板项 --> </el-collapse> </template> <script setup> import { ref } from &#39;vue&#39;; let activeNames = ref([&#39;1&#39;]); </script> ``` #### 事件 (Events) - `update:modelValue`: 当前选中的面板发生变化时触发此事件，参数为新的模型值。 ```javascript // 处理change事件的例子 const handleChange = (val) => { console.log(val); }; ``` ```html <el-collapse v-model="activeNames" @update:model-value="handleChange"> ... </el-collapse> ``` #### 方法调用 由于大多数情况下不需要直接操作组件实例的方法，在官方文档中并未特别提及可访问的具体方法。如果确实有需求，则可以通过 `$refs` 获取组件实例并尝试调用其公开的方法。 #### 完整示例代码 下面是一个完整的例子来展示如何创建带有两个面板的折叠区域： ```html <template> <div id="app"> <el-collapse v-model="activeNames" @update:model-value="handleChange"> <el-collapse-item title="一致性 Consistency" name="1"> <div>与现实生活一致：与现实生活的流程、逻辑保持一致。</div> </el-collapse-item> <el-collapse-item title="反馈 Feedback" name="2"> <div>控制反馈：通过界面样式和交互动效让用户可以清晰感知自己的操作结果。</div> </el-collapse-item> </el-collapse> </div> </template> <script setup> import { ref } from &#39;vue&#39;; let activeNames = ref([&#39;1&#39;]); const handleChange = (val) => { console.log(`activated names:${JSON.stringify(val)}`); }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

浮生若梦777

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

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

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

打赏作者

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

抵扣说明：

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

余额充值