项目提交

longyvfengyun

2023-11-10 ed6b571e73b2088894199239ff90eb9263504fd2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<template>
  <div class="side-menu-wrapper">
    <logo :collapse="isCollapse" />
      <div class="side-menu-content">
          <el-menu
              :default-active="activeMenu"
              :collapse="isCollapse"
              :background-color="menuStyle.bg"
              :text-color="menuStyle.text"
              :unique-opened="false"
              :active-text-color="menuStyle.activeText"
              :collapse-transition="false"
              mode="vertical">
              <sidebar-item v-for="route in menus" :key="route.path" :item="route" :base-path="route.path" />
          </el-menu>
      </div>
  </div>
</template>
 
<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import sidebarItem from "./SidebarItem.vue";
import routes from "@/router/routes";
export default {
  components: { Logo, sidebarItem},
    data() {
        return {
            menuStyle: {
                bg: "#304156",
                text: "#bfcbd9",
                activeText: "#409EFF"
            },
            menus: routes
        }
    },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
    isCollapse() {
      return !this.sidebar.opened
    }
  }
}
</script>
 
<style lang="less" scoped>
.side-menu-wrapper {
    display: flex;
    flex-direction: column;
    .side-menu-content {
        flex: 1;
        overflow-y: auto;
    }
}
</style>