---

前言

Element-ui官网导航菜单栏中,有折叠类型的导航栏选项，效果如下

项目图如下：

---

一、制作开关按键

:class="collapseBtnClass"为图标样式，点击的时候触发事件名称为collapse，二者都在数据与事件逻辑中控制。

 <div style="flex: 1; font-size: 20px" >
   <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
 </div>

二、菜单栏控制

:width="sideWidth+'px'"用来控制侧边栏大小。

<el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246); height: 100%;">

:collapse-transition="false" 是关闭折叠时的动画，要不然折叠时字是一个个消失的。
:collapse属性是“是否水平折叠收起菜单”，下面默认数据为false。

<el-menu :default-openeds="['1', '3']" style="height: 100%"
         background-color="rgb(48,65,86)"
         text-color="#fff"
         active-text-color="#ffd04b"
         :collapse-transition="false"
         :collapse="isCollapse"
>

element-ui官网也有说明。

导航字段要与图标分开，才能在折叠时只展示图标、不展示字段。

<template slot="title">
  <i class="el-icon-message"></i>
  <span slot="title">导航一</span>
</template>
//...
<template slot="title">
  <i class="el-icon-menu"></i>
  <span slot="title">导航二</span>
</template>
//...
<template slot="title">
  <i class="el-icon-menu"></i>
  <span slot="title">导航二</span>
</template>

左上角名称与图标的处理，名称绑定了v-show="logoTextShow"，在折叠时不展示。

 <img src="../assets/logo.png" style="width: 20px; position: relative; top: 5px; margin-right: 5px">
 <b style="color: white" v-show="logoTextShow">ML后台管理系统</b>

三、数据与事件逻辑控制

export default {
  name: //...,
  data() {
    const item = {
		//...
    };
    return {
      tableData: //...,
      //默认图标为"el-icon-s-fold"
      collapseBtnClass: "el-icon-s-fold",
      //菜单默认不折叠
      isCollapse: false,
      //默认宽度200
      sideWidth: 200,
      logoTextShow: true,
    }
  },
  methods:{
    //点击收缩按钮触发
    collapse(){
      //collapse为false时展开，为true时折叠。
      this.isCollapse = !this.isCollapse
      //折叠时
      if(this.isCollapse){
      	//折叠时宽度为64
        this.sideWidth = 64
        //变换图标样式
        this.collapseBtnClass = 'el-icon-s-unfold'
        //折叠时不展示名称“ML后台管理系统”
        this.logoTextShow = false
      //展开时
      }else{
      	//展开时宽度为200
        this.sideWidth = 200
        //变换图标样式
        this.collapseBtnClass = 'el-icon-s-fold'
        //展开时展示名称“ML后台管理系统”
        this.logoTextShow = true
      }
    }
  }
}

四、效果展示

---

总结

折叠能使项目功能展示更饱满，处理好事件控制逻辑，就能很好的应用菜单栏的折叠和展开效果。

---

参考链接

• 从0开始带你手撸一套SpringBoot+Vue后台管理系统（2022年最新版）
• 【VUE项目实战】19、实现侧边栏折叠与展开功能