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

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

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

  },
  methods: {
    requireImg,
    getCurrMenuList() {
      let arr = this.$route.matched;
      let route = this.routers[0].children;
      if (arr.length>1) {
        let obj = route.find((e) => (e.path == arr[1].path));
        route = obj.children;
      }
      this.menuList = JSON.parse(JSON.stringify(route))
      this.selectedKeys = [];
      if (arr.length>2) {
        for (let i = 0; i < arr.length; i++) {
          this.selectedKeys.push(arr[i].path)
        }
      } else if (arr.length===2) {
        if (this.menuList.length>0 && !this.menuList[0].children) {
          this.handleClick(this.menuList[0]);
          this.selectedKeys.push(this.menuList[0].path)
        }
      }
    },
    handleClick(item) {
      let path = item.path?item.path:item.key
      this.$router.push({path: 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.path" :route="item.key" 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.meta.breadcrumb }}
          </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.meta.breadcrumb }}</span>
          </template>
          <a-menu-item v-for="subItem in item.children" :key="subItem.path" :route="subItem.path">
            <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>{{ subItem.meta.breadcrumb }}</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>