frame/layout/admin/admin-menu.vue

<template>
  <div id="admin-menu" style="background-color: rgb(0, 20, 42);">
    <el-row>
      <el-col :span="24">
        <div class="logo">
          <img src="https://img.alicdn.com/tfs/TB13UQpnYGYBuNjy0FoXXciBFXa-242-134.png" width="40" />
          <span class="site-name">ADMIN LITE</span>
        </div>
      </el-col>
      <el-col :span="24">
        <template>
          <el-menu
            mode="vertical"
            :show-timeout="200"
            background-color="#00142a"
            text-color="hsla(0, 0%, 100%, .65)"
            active-text-color="#409EFF"
            :unique-opened="true"
            :default-active="defualtActive"
          >
            <scroll-bar>
              <menu-item :menus="menu"></menu-item>
            </scroll-bar>
          </el-menu>
        </template>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import menuItem from './menu/menu-item.vue';
import * as menus from '@frame/config/menu-config';
import scrollBar from './scrollBar.vue';
import _ from 'lodash';
export default {
  name: 'admin-menu',
  props: {},
  components: {
    scrollBar,
    menuItem,
  },
  data: () => ({
    menu: [],
  }),
  created() {},
  computed: {
    project_modules() {
      return process.env.VUE_APP_MODULE;
    },
    defualtActive() {
      return this.$route.path;
    },
  },
  mounted() {
    let arr = _.get(menus, this.project_modules, []);
    let r = this.filterMenu(_.cloneDeep(arr), this.project_modules);
    this.$set(this, `menu`, r);
  },
  methods: {
    selectMenu(path, modules) {
      if (this.project_modules === modules) this.$router.push({ path: path });
    },
    filterMenu(menus, umod) {
      let nm = menus.map(menu => {
        //mod 不存在:检查下面每一子项是否有限制
        //mod 存在:检查是否符合要求,符合,检查子项;不符合,略过
        let mod = _.get(menu, 'module');
        if ((mod && mod.includes(umod)) || !mod) {
          let children = _.get(menu, 'children');
          if (children) {
            menu.children = this.filterMenu(children, umod);
          }
          return menu;
        }
      });
      return _.compact(nm);
    },
  },
};
</script>

<style lang="less" scoped>
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  line-height: 4rem;
  background: #002140;
  color: #fff;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  overflow: hidden;
}
.site-name {
  margin-left: 0.325rem;
}
.sidebar-container {
  box-shadow: 0.125rem 0 0.375rem rgba(0, 21, 41, 0.35);
  transition: width 0.28s;
  width: 12rem !important;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
  a {
    display: inline-block;
    width: 100%;
  }
  .el-menu {
    padding-top: 1rem;
    width: 100% !important;
    border: none;
  }
}
</style>