vue+element 后台管理系统-折叠侧边导航栏

# 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>

```