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

原创已于 2022-11-09 17:54:53 修改 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2020-12-02 17:23:39 首次发布

折叠导航栏专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在vue+element的后台管理系统中实现折叠侧边导航栏。首先，在头部组件中添加折叠按钮，通过template和script进行逻辑处理。接着，在侧边导航栏组件中添加控制属性，同样利用template和script来实现导航栏的显示与隐藏状态控制。

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

1. 在头部组件中添加折叠按钮

template:

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

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

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

<script>
// 通过bus通信
 import eventBus from "@/utils/eventBus/eventBus.js"
 data() {
      return {
          collapse: false,
      }
 },
 created() {
     eventBus.$on('collapse', msg => {
        this.collapse = msg;
    });
 }
</script>