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. 首先，需要为