iot-front-ui/src/components/home/ContainerAside.vue

<script>
import {requireImg} from "@/utils/requireImg";

export default {
  data() {
    return {
      selectedKeys: [],
      highLight: {backgroundColor: '#e9f6fd'},
      menuList: [],
      height: '100%',
    }
  },
  mounted() {
    let app = this;
    this.$nextTick(() => {
      app.getCurrMenuList()
    })

  },
  methods: {
    requireImg,
    getCurrMenuList() {
      let matchRoutes = this.$route.matched;
      let menu = this.$store.menuStore().currMenu
      this.menuList = [];
      if (menu.children && menu.children.length>0) {
        this.menuList = JSON.parse(JSON.stringify(menu.children))
      }
      if (matchRoutes.length===2) {
        this.toRoute(this.menuList[0].router)
      } else if (matchRoutes.length>2) {
        let route = this.$route.matched[2];
        this.toRoute(route.path)
      }
    },
    handleClick(item) {
      this.toRoute(item.key)
    },
    toRoute(path) {
      this.$router.push({path: path})
      this.selectedKeys = [path]
      this.$forceUpdate()
    }
  }
}
</script>

<template>
  <div class="containerAside" :style="{height: '100%'}">
    <a-menu
        style="width: 100%;padding-top: 8px;height: 100%"
        mode="inline"
        theme="dark"
        v-model:selectedKeys="selectedKeys"
        @click="handleClick"
    >
      <template v-for="item in menuList">
        <a-menu-item  class="menuItem" :key="item.router" :route="item.router" v-if="!item.children">
        <span class="anticon" style="vertical-align: text-top">
          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg(item.icon)"></a-avatar>
        </span>
          <span >
            {{ item.name }}
          </span>
        </a-menu-item>

        <a-sub-menu :key="item.name" v-else>
          <template #title>
            <span class="anticon" style="vertical-align: text-top">
          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg(item.icon)"></a-avatar>
        </span>
            <span>{{ item.name }}</span>
          </template>
          <a-menu-item v-for="subItem in item.children" :key="subItem.router" :route="subItem.router">
            <span>{{ subItem.name }}</span>
          </a-menu-item>
        </a-sub-menu>
      </template>

    </a-menu>
  </div>
</template>

<style lang="less" scoped>
@menu-dark-bg: #ffffff;
@menu-dark-submenu-bg: #ffffff;
@menu-dark-color: #808080;
@menu-dark-arrow-color: #808080;
@menu-dark-highlight-color: #808080;
@menu-dark-item-active-bg: #e5f4ff;
@menu-dark-selected-item-icon-color: #808080;
@menu-dark-selected-item-text-color: #808080;
.containerAside {
  width: 170px;
  height: 100%;
  border-right: 1px solid #eeeeee;
  display: inline-block;
  vertical-align: top;

  .menuItem {
    margin: 15px 0;
  }
  /deep/ .ant-menu-sub {
    box-shadow: none !important;
    background-color: white;
    margin: 0 !important;
  }
  /deep/ .ant-menu-item-selected {
    color: @menu-dark-selected-item-text-color !important;
  }
  /deep/ .ant-menu-dark .ant-menu-submenu-title:hover {
    color: @menu-dark-selected-item-text-color;
  }
  .ant-menu-inline-collapsed > .ant-menu-item {
    padding: 0 !important;
    margin-left: 0 !important;
    padding-left: 33% !important;
  }
  /deep/ .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item {
    padding: 0 !important;
    margin-left: 0 !important;
    padding-left: 33% !important;
  }
}
</style>