Vue3+Element-Plus 实现左侧菜单折叠与展开功能 二七_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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4. 添加完样式后的效果

2.3 实现点击该DIV时，触发菜单折叠与展开

1. 首先，需要为该DIV 按钮条，绑定单击事件

2. 为侧边栏菜单绑定 collapse 属性

• collapse 属性 说明:是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）
• 该属性默认值是 False,把该值改变 True,就可以实现折叠与展开效果了

Menu 菜单 | Element Plus (gitee.io)[这里是图片007]https://element-plus.gitee.io/zh-CN/component/menu.html#menu-%E5%B1%9E%E6%80%A7

如上，为菜单栏绑定了属性并赋值后，左侧菜单栏折叠与展开效果还并未生效。

3. 接下来先为侧边栏菜单collapse 属性动态赋值，并实现按钮条的点击单击事件，让折叠与展开效果生效

• 首先在数据区定义一个接受bool 变量对象

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

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

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

4.效果

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

1. 是什么原因导致的

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

2. 如何解决

• 只需要在判断折叠与展开时，赋不同的宽度值即可解决

也就是说，如果isCollapse 值为true（折叠） 的时候，赋值为46px （把像素值变小）。isCollapse 值为false （展开）的时候，赋值为200 px (把像素值还原)。

• 通过三元运算符解决

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">
          <!-- 一级菜单模板区域 -->
          <template #title>
            <el-icon :class="iconsObj[item.id]"></el-icon>
            <span>{{item.authName}}</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">
          <template #title>
            <el-icon><iconMenu /></el-icon>
            <span>{{subItem.authName}}</span>
          </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
      </el-aside>
      <!-- 右侧内容主体区域 -->
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data () {
    return {
      // 左侧菜单数据对象
      menulist: [],
      // 字体图标对象
      iconsObj: {
        125: 'iconfont icon-users',
        103: 'iconfont icon-tijikongjian',
        101: 'iconfont icon-shangpin',
        102: 'iconfont icon-danju',
        145: 'iconfont icon-baobiao'
      },
      // 是否折叠
      isCollapse: false
    }
  },
  created () {
    this.getMenuList()
  },
  methods: {
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    // 获取所有的菜单数据
    async  getMenuList () {
      const { data: res } = await this.$http.get('menus')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      // 成功了，进行赋值
      this.menulist = res.data
      console.log(res)
    },
    // 点击按钮，切换菜单的折叠与展开
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    }
  }
}
</script>
<style lang="less" scoped>
.home_container {
  height: 100%;
}
.el-header {
  background-color: #363d40;
  // 给头部设置一下弹性布局
  display: flex;
  // 让它贴标左右对齐
  justify-content: space-between;
  // 清空图片左侧padding
  padding-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;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

以上出自：【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibili[这里是图片018]https://www.bilibili.com/video/BV1x64y1S7S7?p=38