epmet-work-pc-chengyang/src/views/main-sidebar-sub-menu.vue

<template>
  <div v-if="menu.showFlag">
    <el-submenu
      v-show="menu.showFlag == 1"
      v-if="menu.children && menu.children.length >= 1"
      :index="menu.id"
      ref="subMenu"
      popper-append-to-body
    >
      <template slot="title">
        <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
          <use :xlink:href="`#${menu.icon}`" />
        </svg>
        <span :title="menu.name">{{ menu.name }}</span>
      </template>
      <sub-menu
        :root="false"
        v-show="item.showFlag == 1"
        v-for="item in menu.children"
        :key="item.id"
        :menu="item"
      ></sub-menu>
    </el-submenu>
    <el-menu-item
      :class="{ 'activeTow': menu.id == $store.state.LevelTowMenuActiveName }"
      v-else
      :index="menu.id"
      @click="gotoRouteHandle(menu.id)"
    >
      <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
        <use :xlink:href="`#${menu.icon}`" />
      </svg>
      <span :title="menu.name">{{ menu.name }}</span>
    </el-menu-item>
  </div>
</template>

<script>
import SubMenu from "./main-sidebar-sub-menu";
export default {
  name: "sub-menu",
  props: {
    menu: {
      type: Object,
      required: true,
    },
    root: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    SubMenu,
  },
  methods: {
    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
    gotoRouteHandle(menuId) {
      var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
        (item) => item.meta.menuId === menuId
      )[0];
      if (route) {
        console.log(route);
        if (route.meta.iframeURL.endsWith("【跳转新页面】")) {
          window.open(route.meta.iframeURL.slice(0, -7));
        } else {
          this.$router.push({ name: route.name });
        }
      }
      this.$store.state.LevelTowMenuActiveName = menuId
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/c/function.scss";

/deep/ .el-menu-item {
  @include toe;
}
.activeTow{
  background-color: #ecf4fe;
}
.activeTow::after{
  display: inline-block;
  content: '';
  background-color: #0056d6;
  width: 2px;
  height: 48px;
  position: absolute;
  right: 3px;
  top: 0;
}
</style>