frame-template/src/layout/admin/admin-menu.vue

<template>
  <div id="admin-menu" style="background-color: rgb(0, 20, 42);">
    <scroll-bar>
      <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-menu
        mode="vertical"
        :show-timeout="200"
        background-color="#00142a"
        text-color="hsla(0, 0%, 100%, .65)"
        active-text-color="#409EFF"
        @select="selectMenu"
      >
        <span v-for="(item, index) in devMenu" :key="index">
          <!-- <span v-if="`${item.role}` === `${user.role}` || !item.role"> -->
          <!--  v-if="`${item.role}` === `${user.role}`" -->
          <span v-if="!item.children" :to="item.path" :key="item.name">
            <el-menu-item :index="item.path">
              <i v-if="item.icon" :class="item.icon"></i>
              <span v-if="item.name" slot="title">{{ item.name }}</span>
            </el-menu-item>
          </span>

          <el-submenu v-else :index="item.name || item.path" :key="item.name">
            <template slot="title">
              <i v-if="item && item.icon" :class="item.icon"></i>
              <span v-if="item && item.name" slot="title">{{ item.name }}</span>
            </template>
            <template v-for="(child, childIndex) in item.children">
              <div :key="childIndex" v-if="!child.hidden">
                <el-menu-item :index="item.path + child.path">
                  <span v-if="child && child.name" slot="title">{{ child.name }}</span>
                </el-menu-item>
              </div>
            </template>
          </el-submenu>
        </span>
      </el-menu>
    </scroll-bar>
  </div>
</template>

<script>
import { devMenu } from '../../config/menu-config';
import scrollBar from './scrollBar.vue';
export default {
  name: 'admin-menu',
  props: {},
  components: {
    scrollBar,
  },
  data: () => ({
    devMenu,
  }),
  created() {},
  computed: {},
  methods: {
    selectMenu(index) {
      console.log(index);
      this.$router.push({ path: index });
    },
  },
};
</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;
  }
  .el-submenu .el-menu-item {
    min-width: 16rem !important;
    padding-left: 3rem !important;
    background-color: #000c17 !important;
    &:hover {
      color: #fff !important;
    }
  }
  .el-menu-item,
  .el-submenu .el-menu-item {
    &.is-active {
      background-color: #188fff !important;
      color: #fff !important;
    }
  }
  .el-submenu__title i {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.65);
  }
}
</style>