index.vue
3.04 KB
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<template>
<div :class="{ 'has-logo': showLogo }">
<!-- <logo v-if="isCollapse" :collapse="isCollapse" />-->
<!-- <logo v-else :collapse="isCollapse" />-->
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="variables.menuBg"
:text-color="variables.menuText"
:unique-opened="false"
:active-text-color="variables.menuActiveText"
:collapse-transition="false"
mode="vertical"
>
<!-- v-for="route in routes" -->
<!-- :key="route.path" -->
<sidebar-item
v-for="(route, index) in list[mes]"
:key="route.path"
class="tabLink"
:item="route"
:base-path="route.path"
/>
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
export default {
name: 'Sidebar',
components: { SidebarItem, Logo },
data() {
return {
routes: [],
isCollapse:false
}
},
props: {
mes:0,
list: {
type: Array, // 一维数组
required: true, // 如果这个属性是必须的
validator: function(value) {
// 自定义验证器来检查数组中的每个元素是否也是数组
return value.every(item => Array.isArray(item));
}
}
},
mounted(){
},
watch: {
$route(to, from) {
// 这里可以添加逻辑来处理路由变化时的行为
// 例如，更新 activeMenu
// this.activeMenu = to.meta.activeMenu || to.path;
}
// mes(newVal, oldVal) {
// console.log(this.routers)
// let list1=[]
// this.routers.map(item=>{
// this.list[newVal].map(el=>{
// if(item.meta){
// if(item.meta.title==el){
// list1.push(item)
// }
// }
// })
// })
// this.list[newVal]=list1
// }
},
computed: {
...mapGetters([
'sidebar',
'routers'
]),
// routes() {
// // return this.$router.options.routes;
// return JSON.parse(localStorage.getItem("permissionList"));
// },
activeMenu () {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
// if(show)
if (meta.activeMenu) {
return meta.activeMenu
}
return path
},
showLogo() {
return this.$store.state.settings.sidebarLogo
},
variables() {
return variables
},
// isCollapse() {
// return !this.sidebar.opened
// }
},
}
</script>
<style scoped>
::v-deep .el-scrollbar__thumb {
background-color: #DEEBE2;
}
.el-menu{
padding:12px 0;
width:200px;
}
::v-deep .el-submenu__icon-arrow{
position: absolute;
top: 50%;
color:#4C4C4C !important;
right: 20px !important;
margin-top: -7px;
}
</style>