Vue3+Element-Plus实现左侧菜单折叠与展开功能⼆七1.最终实现的效果图
2.  实现左侧菜单折叠与展开功能步骤
2.1 ⾸先应该在菜单顶部放⼀个折叠展开的按钮条
2.2 接下来，画按钮条UI结构，实现折叠与展开功能
1. 在侧边栏内部，在侧边栏菜单区域之前，放置⼀个DIV。
2. 在该DIV上⾯添加⽂本，通过点击该DIV，触发菜单折叠与展开
3.通过类选择器，为该DIV 添加相关样式
.toggle-button{
// 添加背景颜⾊
background-color: #4A5064;
// 设置⽂本⼤⼩
font-size:10px;
// 设置⽂本⾏⾼
line-height:24px;
// 设置⽂本颜⾊
color:#fff;
// 设置⽂本居中
text-align: center;
// 设置⽂本间距
letter-spacing: 0.2em;
// 设置⿏标悬浮变⼩⼿效果
cursor:pointer;
}
4. 添加完样式后的效果
2.3  实现点击该DIV时，触发菜单折叠与展开1. ⾸先，需要为该DIV 按钮条，绑定单击事件
2. 为侧边栏菜单绑定collapse 属性
collapse 属性        说明：是否⽔平折叠收起菜单（仅在 mode 为 vertical 时可⽤）
该属性默认值是 False，把该值改变 True，就可以实现折叠与展开效果了
如上，为菜单栏绑定了属性并赋值后，左侧菜单栏折叠与展开效果还并未⽣效。
3. 接下来先为侧边栏菜单collapse 属性动态赋值，并实现按钮条的点击单击事件，让折叠与展开效果⽣效
⾸先在数据区定义⼀个接受bool 变量对象
当触发DIV 点击事件时，对该bool 值对象进⾏动态赋值切换
修改侧边栏，动态接受bool 值
通过collapse-transition 关闭侧边栏收缩动画效果。就是左侧菜单栏收缩是，是否有动画效果。默认值是true
4.效果
2.4  折叠与展开功能是实现了，但是背景颜⾊并没有随着菜单折叠时跟着变⼩或展开时跟着变⼤
1. 是什么原因导致的
⾸先，整个红⾊区域是属于左侧菜单栏的，那么查看代码的UI结构时，就会发现，这个菜单侧边栏是固定写死了⼀个200宽度的像素。也就是说，是固定的这个宽度值，导致左侧菜单栏背景⽆法跟着动态折叠起来的原因。
2. 如何解决
只需要在判断折叠与展开时，赋不同的宽度值即可解决
也就是说，如果 isCollapse 值为true（折叠） 的时候，赋值为46 px （把像素值变⼩）。isCollapse 值为false （展开）的时候，赋值为200 px (把像素值还原)。
vue element admin通过三元运算符解决
2.5. 最终效果
3. Home.vue 代码
<template>
<el-container class="home_container">
<!-- 头部区域 -->
<el-header>
<div>
<img src="../assets/heima.png" alt="" />
<span>电商后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<!-- 页⾯主体区域 -->
<el-container>
<!-- 侧边栏 -->
<el-aside :width="isCollapse ? '64px':'200px'">
<div class="toggle-button" @click="toggleCollapse">|||</div>
<!-- 侧边栏菜单区域 -->
<el-menu active-text-color="#409Eff"
background-color="#545c64"
text-color="#fff" unique-opened :collapse="isCollapse" :collapse-transition="false">
<!-- ⼀级菜单 -->
<el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。