baoman / Ezquiz_Platform

<template>
  <div class="aside-box">
    <el-aside id="asideNav">
      <div class="logo-name">
        <img v-if="$store.getters.logoShow" class="logo" :src="code?csLogo:logo" alt="" />
        <template v-else>
          <img class="logo" :src="code?csLogo:logo" alt="" />
          <p class="ellipsis">
            {{ code ? "331互动课堂云平台" : "中天易教云平台" }}
          </p>
        </template>
      </div>
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical"
        @select="selectmenu"
        :collapse="$store.getters.isCollapse"
        background-color="#03152A"
        text-color="rgba(255,255,255,.7)"
        active-text-color="#ffffff"
        :router="$store.getters.uniquerouter"
        :unique-opened="$store.getters.uniquerouter"
        :collapse-transition="true"
      >
        <template v-for="(item, index) in $store.getters.routers">
          <template v-if="!item.hidden">
            <el-submenu
              v-if="!item.alone && item.children.length > 0"
              :index="index + ''"
              :key="index"
            >
              <template slot="title">
                <i :class="item.iconCls ? item.iconCls : [fa, fa - server]"></i>
                <span slot="title">{{ item.name }}</span>
              </template>

              <menu-tree :menuData="item.children"></menu-tree>
            </el-submenu>
            <el-menu-item
              :index="item.path"
              v-else
              :key="item.path"
              :class="path.includes(item.path) ? 'is-active' : ''"
            >
              <i :class="item.iconCls ? item.iconCls : [fa, fa - file]" />
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
import menuTree from "./menuTree";
import { getURLParams } from "@/utils";
const logo = require('../../../assets/images/logo.png')
const csLogo = require('../../../assets/images/331logo.png')
export default {
  name: "asideNav",
  components: {
    menuTree,
  },
  watch: {
    // 监听浏览器直接输入路由，将此路由添加到tabnavBox
    "$route.path": function (val) {
      // this.selectmenu(val);
      this.path = val;
    },
  },
  data() {
    return {
      path: "",
      code: "",
      logo:logo,
      csLogo:csLogo,
    };
  },
  created() {
    this.code = getURLParams("code") || localStorage.getItem("csCode") || "";
    this.path = this.$route.path;
  },
  methods: {
    selectmenu(key, indexpath) {
      // 如果不使用 elemenUI 菜单的 vue-router 的模式将用以下方式进行页面跳转 el-menu的router设置为false
      // this.$router.push(indexpath.join("/"))
      let router = this.$store.getters.routers;
      let name = "";
      let navTitle = function (path, routerARR) {
        for (let i = 0; i < routerARR.length; i++) {
          if (routerARR[i].children.length > 0 || routerARR[i].path === path) {
            if (
              routerARR[i].path === path &&
              routerARR[i].children.length < 1
            ) {
              name = routerARR[i].name;
              break;
            }
            navTitle(path, routerARR[i].children);
          }
        }
        return name;
      };
      this.$store.dispatch("addTab", {
        title: navTitle(key, router),
        path: key,
      });
    },
  },
};
</script>

<style lang="scss">
$top: top;
$bottom: bottom;
$left: left;
$right: right;
%w100 {
  width: 100%;
}

%h100 {
  height: 100%;
}

%cursor {
  cursor: pointer;
}

@mixin set-value($side, $value) {
  @each $prop in $leftright {
    #{$side}-#{$prop}: $value;
  }
}
.aside-box {
  max-width: 200px;
}
#asideNav {
  width: auto !important;
  display: flex;
  flex-direction: column;
  .logo-name {
    background-color: #03152a !important;
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    box-sizing: border-box;
    @extend %w100;
    .logo {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
    .ellipsis {
      overflow: hidden;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      color: #fff;
    }
  }
  .el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
    @extend %h100;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .el-menu {
    flex: 1;
    overflow: inherit;
    border-right: none;
    &::-webkit-scrollbar {
      display: none;
    }
    .fa {
      vertical-align: middle;
      margin-right: 5px;
      width: 24px;
      text-align: center;
      font-size: 18px;
    }
    .el-menu-item {
      background-color: #020f1d !important;
      border-bottom: 1px solid #020f1d;
      &:hover {
        color: #ffffff !important;
        background-color: #375573 !important;
      }
    }
    .el-menu-item.is-active {
      background-color: #56a9ff !important;
    }
    .is-opened > .el-submenu__title > .el-icon-arrow-down {
      color: #ffffff;
      font-weight: 500;
      font-size: 18px;
    }
  }
}
:deep(.is-active) {
  color: #fff;
}
</style>