# vue+element 后臺(tái)管理系統(tǒng)-折疊側(cè)邊導(dǎo)航欄
## 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: {
? ? // 側(cè)邊欄折疊
? collapseChage() {
? ? ? this.collapse = !this.collapse;
? ? ? eventBus.$emit('collapse', this.collapse);
? },
}
</script>
```
## 2. 在側(cè)邊導(dǎo)航欄的組件中添加控制的屬性
**template:**
```javascript
<template>
? ? <el-menu class="hc-menu" :collapse="collapse">
? ? ? <el-menu-item class="hc-menu-item">導(dǎo)航一</el-menu-item>
? ? ? <el-menu-item class="hc-menu-item">導(dǎo)航二</el-menu-item>
? ? ? <el-menu-item class="hc-menu-item">導(dǎo)航三</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>
```
