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
| <template>
| <el-scrollbar class="avue-menu">
| <div v-if="menu && menu.length == 0 && !isHorizontal" class="avue-sidebar--tip">
| {{ $t('menuTip') }}
| </div>
| <el-menu
| unique-opened
| :default-active="activeMenu"
| :mode="setting.sidebar"
| :collapse="getScreen(isCollapse)"
| >
| <sidebar-item :menu="menu"></sidebar-item>
| </el-menu>
| </el-scrollbar>
| </template>
|
| <script>
| import { mapGetters } from 'vuex';
| import sidebarItem from './sidebarItem.vue';
|
| export default {
| name: 'sidebar',
| components: { sidebarItem },
| inject: ['index'],
| created() {
| this.index.openMenu();
| },
| computed: {
| ...mapGetters(['isHorizontal', 'setting', 'menu', 'tag', 'isCollapse', 'menuId']),
| activeMenu() {
| const route = this.$route;
| const { meta, path } = route;
| if (meta.activeMenu) {
| return meta.activeMenu;
| }
| return path;
| },
| },
| };
| </script>
| <style lang="scss" scoped>
| .el-menu{
| :deep(){
| .el-menu-item.is-active{
| background: linear-gradient( 90deg, rgba(179,194,255,0.02) 0%, rgba(20,65,255,0.09) 100%) !important;
| border-radius: 16px 16px 16px 16px;
| i,span{
| color: rgba(20, 65, 255, 1) !important;
| }
| }
| .el-sub-menu i{
| font-size: 16px;
| }
| .el-menu-item i{
| font-size: 16px;
| }
|
| }
| }
|
| </style>
|
|
