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" :path="path"></menu-tree>

              </el-submenu>

              <el-menu-item
                :index="item.path"
                v-else
                :key="item.path"
                :class="path.includes(item.path) ? 'is-active' : ''"

                @click="isKeep(item.path)"

              >

                <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";

  import BusEvent from "@/utils/busEvent";

  const logo = require("../../../assets/images/EasyQuiz.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;

        BusEvent.$off("keepAlive");

      },
    },

    data() {

      return {

        path: "",
        code: "",

        logo: logo,
        csLogo: csLogo,

      };

    },

    created() {

      this.code = getURLParams("code") || this.$store.getters.csCode;

      this.path = this.$route.path;

    },

    methods: {

      isKeep() {
        BusEvent.$emit("keepAlive");
      },

      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>