# vue+element 后台管理系统-折叠侧边导航栏
## 1. 在头部组件中添加折叠按钮
**template:**
```javascript
<template>
<!-- 折叠按钮 -->
<div class="collapse-btn" @click="collapseChage">
<i v-if="!collapse" class="bg-icon bg-icon-el-icon-s-fold"></i>
<i v-else class="bg-icon bg-icon-el-icon-s-unfold"></i>
</div>
</template>
```
**script:**
```javascript
<script>
// 通过bus通信
import eventBus from "@/utils/eventBus/eventBus.js"
data() {
return {
collapse: false,
}
},
methods: {
// 侧边栏折叠
collapseChage() {
this.collapse = !this.collapse;
eventBus.$emit('collapse', this.collapse);
},
}
</script>
```
## 2. 在侧边导航栏的组件中添加控制的属性
**template:**
```javascript
<template>
<el-menu class="hc-menu" :collapse="collapse">
<el-menu-item class="hc-menu-item">导航一</el-menu-item>
<el-menu-item class="hc-menu-item">导航二</el-menu-item>
<el-menu-item class="hc-menu-item">导航三</el-menu-item>
</el-menu>
</template>
```
**script:**
```javascript
<script>
// 通过bus通信
import eventBus from "@/utils/eventBus/eventBus.js"
data() {
return {
collapse: false,
}
},
created() {
eventBus.$on('collapse', msg => {
this.collapse = msg;
});
}
</script>
```
