vue实现对左边菜单的折叠与展开

最新推荐文章于 2024-09-17 08:00:00 发布
最新推荐文章于 2024-09-17 08:00:00 发布
阅读量4.3k 收藏 4
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51459514/article/details/123813092
版权
本文介绍了如何在Vue中利用el-menu组件实现菜单的折叠与展开功能。通过动态绑定属性，设置折叠过渡效果，以及在数据中添加控制变量和折叠事件，达到菜单框跟随菜单动态收缩和展开的效果。
摘要由CSDN通过智能技术生成

在el-menu中使用以下两种属性

collapse 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用） boolean — false
collapse-transition 是否开启折叠动画 boolean — true

具体实现代码

1.添加属性，并进行动态绑定即：，如果没有：则不识别。collapse-transition的存在是为了让折叠不卡顿。

<el-menu background-color="#333744" text-color="#fff"
active-text-color="#1495E7" unique-opened :collapse="isCollapse" :collapse-transition="false">

2.在datas中添加变量

//是否折叠
isCollapse: false

3.添加折叠点击事件

<div class="toggle-button"
最低0.47元/天 解锁文章
不吹走的风
关注
el-aside中添加el-menu设置collapse宽度自适应
wocjy的博客
03-08 2175
el-aside内使用el-menu,水平折叠时宽度无法自适应问题解决
vue多级复杂列表展开/折叠及全选/分组全选实现
10-17
在学习和实现Vue多级复杂列表的展开/折叠及全选/分组全选功能时，我们需要关注一些关键技术和实现方法。首先，我们要了解如何构建数据结构，这是展示列表的基础。然后，我们需要掌握如何通过数据驱动的方式初始化...
Vue2(三)实现子菜单展开收缩，带动画效果实现方法
10-17
主要介绍了vue实现收缩展开效果的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3 菜单展开和收起
jnfy的博客
09-17 396
Vue3 菜单展开和收起
el-submenu实现单个菜单折叠
weixin_43550562的博客
11-05 1万+
以上的效果就是，我打开“系统管理”折叠框，然后再打开“采集服务器”折叠框，这样一来的话就会让这个navMenu显得很高，严重的情况，就会撑破整个页面。怎么办呢？ element代码实现如下： <template> <div class="index-menu"> <div class="index-nav"> &...
【vue+scss】实现伸缩菜单，可以展开折叠，淡入淡出动画效果
PolarisWay的博客
03-30 1095
这是一个可以实现伸缩菜单，展开折叠菜单，具有淡入淡出动画效果的vue组件
vue—菜单栏自适应折叠
小灰灰
08-01 4062
vue—菜单栏自适应折叠
element ui之NavMen 展开和折叠菜单
weixin_43663349的博客
10-27 2320
el-menu标签加上collapse属性，绑定变量isCollapse(属性值为boolean类型)，通过变量控制收缩展开 <el-menu :collapse="isCollapse"> 审查元素查看折叠后元素的宽度 再通过三元表达式和isCollapse控制宽度 <el-aside :width="isCollapse?'60px':'150px'"> 加个按钮控制展开折叠，为了提高用户体验可以在鼠标移上的时候加提示文字 <el-tooltip .
vue实现树形菜单效果
08-27
4. 使用 CSS 动画来实现菜单项的展开和折叠效果。 5. 使用 Vue 的生命周期钩子函数来实现组件的初始化和更新。 四、实例代码 以下是实现树形菜单效果的实例代码： ```html (v,i) in tree'> (v)" @click=...
后台管理----菜单折叠展开
weixin_51614564的博客
08-16 1399
后台管理实现左侧菜单栏的折叠与展开
vue使用elementui的el-menu的折叠菜单collapse
weixin_49931650的博客
12-02 2167
由于我的是在el-menu所在组件外面的兄弟组件设置是否折叠的控制，我用事件总线bus进行是否折叠传递。就是如此，有疑问评论区见。
vue：左右过渡展开折叠的组件
weixin_42705100的博客
02-12 3360
在网上找了好久关于左右过渡动画折叠的组件，没有合适的代码，效果类似于element UI中的Drawer抽屉组件，只不过ele中的都是悬浮的组件，工作中遇到的很多都是占用空间的展开折叠，网上很多也是上下展开收起的组件，于是就自己写了一个。
菜单栏 折叠 展开
m0_49515138的博客
12-15 743
<el-aside :width="isCollapse ? '0px' : '300px'" style="background-color: rgb(238, 241, 246);transition:0.5s;" > <li style="width: 10px; background-color: #ecf1fa" class="navli"> <div class="navbutton" @click=
VUE的菜单导航折叠
trf54321的博客
03-06 1081
当idCollapse 为true的时候，这里的small 设置的样式就会生效，同时这个icon图标（向右）的显示由这个 is-Collapse的值（只有为true才会变化向右的图标）来控制。:class="{small:isCollapse} //这个是为了使得在折叠的时候，按钮的显示不被覆盖，所以绑定一个padding-left:64px,只有isCollapse 为 true的时候这个属性才会生效。子组件的isCollapse的值由父组件默认传递，开始都是父组件所设置的值也就是false。
vue Element 左侧菜单栏 折叠/展开效果
盖世小可爱的博客
02-28 2111
vue Element 左侧菜单栏 折叠/展开效果
Vue+elementUI动态渲染折叠导航el-menu
huanhuan03的博客
04-10 7290
动态渲染可折叠el-menu
vue2 实现一个左右两侧，收起与展开组件 ( 用于存放，aside和main )
weixin_43845137的博客
03-30 821
【代码】vue2 实现一个左右两侧，收起与展开组件 ( 用于存放，aside和main )
vue + element-ui制作折叠式菜单
热门推荐
qq_33483829的博客
07-29 2万+
  近期打算做一个进销存系统，因为好久没做前端了，花了一天的时间复习了下vue，用element-ui做了个折叠式菜单。其中复习到的知识点有 transition动画，vuex状态管理，vue-route路由。 1.设置路由 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../pa...
vue的transition动画
博客简介
08-31 148
【代码】vue的transition动画。
vue 实现折叠菜单芙蓉楼送辛渐
最新发布
09-24
在 Vue 中实现折叠菜单，可以利用组件化思想来构建，比如使用 `v-if` 或者 `v-show` 来控制元素的显示隐藏，配合自定义指令或者计算属性来管理折叠状态。这里简单描述一下步骤： 1. 首先创建一个基础的折叠菜单组件，例如 `MenuItem.vue`，包含标题和展开/折叠的状态： ```html <template> <li class="menu-item"> <span @click="toggleFold" :class="{ folded: isFolded }">{{ title }}</span> <transition name="fade"> <div v-if="isFolded" class="menu-content">{{ content }}</div> </transition> </li> </template> <script> export default { data() { return { title: '', content: '', isFolded: true, }; }, methods: { toggleFold() { this.isFolded = !this.isFolded; }, }, }; </script> ``` 2. 然后在需要折叠菜单的地方引入并使用这个组件，例如在一个列表里： ```html <template> <ul> <MenuItem v-for="(item, index) in menuItems" :key="index" :title="item.title" :content="item.content"></MenuItem> </ul> </template> <script> import MenuItem from './MenuItem.vue'; export default { components: { MenuItem, }, data() { return { menuItems: [ { title: '芙蓉楼', content: '送辛渐的内容...' }, // 添加更多菜单项... ], }; }, }; </script> ``` 在这个例子中，用户点击标题时，该菜单项的内容就会折叠或展开。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值