让网站更美观：element 实现导航栏收起展开功能

前言

在进行网站开发时，导航栏是一个非常重要的元素，它可以让用户更加方便地浏览和操作网站。而实现导航栏的收起展开功能，可以为用户提供更加灵活自由的选择。本文将介绍如何使用 Element UI 框架实现导航栏的收起展开功能，让你的网站更加符合用户的需求。

---

实现思路

1. 首先给 el-menu 加上 :collapse="isCollapse" 属性，这个属性也是 element 上的一个参数，意思为是否开启折叠动画，在 data 中定义 isCollapse ，用 true 和 false 控制展开与收起。

---

2. 在 html 中写入以下代码。

 <el-menu :collapse="isCollapse" class="el-menu-vertical"></el-menu>

3. 这里还需要把 el-aside 的宽度设置为跟 el-menu 一样，以免出现执行展开收起时宽度不一样。

  <!-- width的宽度跟collapse一样动态控制 -->
  <el-aside width="collapse"></el-aside>

4. 展开和收起按钮利用 isCollapse 的值动态改变，控制显示隐藏。

<el-header>
  <div :title="isCollapse ? '点击展开' : '点击收起'" class="box_bgd" @click="isC">
    <!-- 点击展开收起导航和切换对应图标 -->
    <i :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
  </div>
</el-header>

---

5. data 中定义的变量。

export default {
  name: "Main",
  data() {
    return {
     isCollapse: false, //默认为展开
    };
  },
};

---

6. methods 中的点击事件。

  methods: {
    // 动态控制展开与收起和切换对应图标
    isC() {
      this.isCollapse = !this.isCollapse;
    },
  },

---

7. 用到的 css 代码。

.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}

---

最后附上完整代码

<template>
  <div>
    <el-container>
      <!-- width的宽度跟collapse一样动态控制 -->
      <el-aside width="collapse">
        <el-menu :default-active="$route.path" router :collapse="isCollapse" class="el-menu-vertical" background-color="#393e42"
          text-color="#fff" active-text-color="rgb(64, 158, 255)">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>工厂设置</span>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div :title="isCollapse ? '点击展开' : '点击收起'" class="box_bgd" @click="isC">
            <!-- 点击展开收起导航和切换对应图标 -->
            <i :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false, //默认为展开
    };
  },
  methods: {
    // 动态控制展开与收起和切换对应图标
    isC() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>

<style scoped>
.el-header {
  background: #b3c0d1;
  color: #333;
  padding: 0 !important;
}

.el-aside {
  background: #393e42;
  color: #333;
  height: 100vh;
}
.el-menu {
  border-right-width: 0;
}
.el-main {
  color: #333;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}
.box_bgd {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.box_bgd i {
  font-size: 20px;
}
.box_bgd:hover {
  background: rgb(203, 215, 230);
}
</style>

---

效果如下