Vue3+Element-Plus实现左侧菜单折叠与展开功能示例 Vue3+Element-Plus实现左侧菜单折叠

1.最终实现的效果图
2.实现左侧菜单折叠与展开功能步骤

2.1 首先应该在菜单顶部放一个折叠展开的按钮条
2.2 接下来，画按钮条UI结构，实现折叠与展开功能
2.3实现点击该DIV时，触发菜单折叠与展开
2.4折叠与展开功能是实现了，但是背景颜色并没有随着菜单折叠时跟着变小或展开时跟着变大
2.5. 最终效果

3. Home.vue 代码

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,就可以实现折叠与展开效果了
Menu 菜单 | Element Plus (gitee.io)

文章图片

如上，为菜单栏绑定了属性并赋值后，左侧菜单栏折叠与展开效果还并未生效。
3. 接下来先为侧边栏菜单 collapse 属性动态赋值，并实现按钮条的点击单击事件，让折叠与展开效果生效
首先在数据区定义一个接受bool 变量对象

文章图片

当触发DIV 点击事件时，对该bool 值对象进行动态赋值切换

文章图片

修改侧边栏，动态接受bool 值

文章图片

通过collapse-transition 关闭侧边栏收缩动画效果。就是左侧菜单栏收缩是，是否有动画效果。默认值是true

文章图片

4.效果

文章图片

2.4折叠与展开功能是实现了，但是背景颜色并没有随着菜单折叠时跟着变小或展开时跟着变大

文章图片

1. 是什么原因导致的
首先，整个红色区域是属于左侧菜单栏的，那么查看代码的UI结构时，就会发现，这个菜单侧边栏是固定写死了一个200宽度的像素。也就是说，是固定的这个宽度值，导致左侧菜单栏背景无法跟着动态折叠起来的原因。

文章图片

2. 如何解决只需要在判断折叠与展开时，赋不同的宽度值即可解决
也就是说，如果 isCollapse 值为true（折叠）的时候，赋值为46 px （把像素值变小）。isCollapse 值为false （展开）的时候，赋值为200 px (把像素值还原)。
通过三元运算符解决
【Vue3+Element-Plus实现左侧菜单折叠与展开功能示例】

文章图片

2.5. 最终效果

文章图片

3. Home.vue 代码

.home_container {height: 100%; }.el-header {background-color: #363d40; // 给头部设置一下弹性布局display: flex; // 让它贴标左右对齐justify-content: space-between; // 清空图片左侧paddingpadding-left: 0; // 按钮居中align-items: center; // 文本颜色color: #fff; // 设置文本字体大小font-size: 20px; // 嵌套> div {// 弹性布局display: flex; // 纵向上居中对齐align-items: center; // 给文本和图片添加间距，使用类选择器span {margin-left: 15px; }}}.el-aside {background-color: #313743; .el-menu {border-right: none; }}.el-main {background-color: #e9edf1; }.iconfont{margin-right: 10px; }.toggle-button{ // 添加背景颜色 background-color: #4A5064; // 设置文本大小 font-size:10px; // 设置文本行高 line-height:24px; // 设置文本颜色 color:#fff; // 设置文本居中 text-align: center; // 设置文本间距 letter-spacing: 0.2em; // 设置鼠标悬浮变小手效果 cursor:pointer; }