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="../../../assets/images/logo.png"
            alt=""
          />
          <template v-else>
            <img class="logo" src="../../../assets/images/logo.png" alt="" />

            <p class="ellipsis">中天易教中天易教中天易教</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";
  
  export default {
    name: "asideNav",
    components: {
      menuTree,
    },
    watch: {
      // 监听浏览器直接输入路由，将此路由添加到tabnavBox
      "$route.path": function (val) {

        // this.selectmenu(val);

        this.path = val

      },
    },

    data(){
      return {
        path:""
      }
    },
    created(){
      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>