zz-admin/src/layout/structure/content/navigationBar.vue

<template>
  <div id="navigationBar" :style="navStatus ? 'width:64px' : ''">
    <el-menu
      :default-active="navActive"
      class="el-menu-vertical-demo"
      :collapse="navStatus"
      :unique-opened="true"
      router
      :collapse-transition="false"
    >
      <div :class="navStatus ? 'logoTopS' : 'logoTop'">
        <img v-if="navStatus" src="@/assets/images/logo@2xS.png" alt="" />
        <img v-else src="@/assets/images/logo@2x.png" alt="" />
      </div>
      <template v-for="(item, index) in routesInfo">
        <el-submenu
          v-if="!item.hidden && item.meta.noCache"
          :index="item.path"
          :key="index"
        >
          <template slot="title">
            <i :class="item.meta.icon"></i>
            <span>{{ item.meta.title }}</span>
          </template>
          <template v-for="(items, indexs) in item.children">
            <el-menu-item
              v-if="!items.hidden"
              :key="indexs"
              :index="items.path"
              >{{ items.meta.title }}</el-menu-item
            >
          </template>
        </el-submenu>
        <el-menu-item
          v-if="!item.hidden && !item.meta.noCache"
          :index="item.path"
          :key="index"
        >
          <i :class="item.meta.icon"></i>
          <span slot="title">{{ item.meta.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    //当前导航栏展示状态
    navStatus() {
      return this.$store.state.navStatus;
    },
    //导航栏菜单
    routesInfo: function () {
      return this.$router.options.routes;
    },
    //当前激活菜单的index
    navActive() {
      return this.$store.state.navActive;
    },
  },
};
</script>

<style lang="less" scoped>
#navigationBar {
  position: fixed;
  top: 0px;
  left: 0;
  bottom: 0;
  width: 226px;
  background: #f7f9fe;
  transition: all 0.3s;
  overflow-x: hidden !important;
  box-shadow: 10px 0px 9px 1px rgba(28, 41, 90, 0.05);
  z-index: 999;
  .logoTop {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 140px;
      height: 40px;
    }
  }
  .logoTopS {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 40px;
      height: 40px;
    }
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 226px;
    min-height: 100%;
    border: none;
    background-color: #f7f9fe;
  }
  .el-menu--collapse {
    width: 64px;
    min-height: 100%;
    border: none;
    background-color: #f7f9fe;
  }
  .el-menu-item {
    background-color: #f7f9fe;
  }
  .el-menu-item:hover {
    background-color: #e3edfe !important;
  }
  .el-menu-item.is-active {
    background-color: #e3edfe !important;
  }
  .el-submenu /deep/ .el-submenu__title:hover {
    background-color: #e3edfe !important;
  }
}
#navigationBar::-webkit-scrollbar {
  display: none;
}
</style>