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
132
133
134
135
136
137
138
<template>
<el-scrollbar>
<div class="ams-el-menu">
<div class="menu-search">
<el-select placement="bottom" v-model="searchValue" clearable filterable
:placeholder="'请输入关键字搜索...'" @change="save(searchValue)">
<template #prefix><i class="el-icon-search"></i></template>
<el-option v-for="item in options" :key="item.menuId" :label="item.menuName" :value="item.navigateUrl" />
</el-select>
</div>
<el-menu unique-opened :collapse-transition='false' :collapse='$store.state.iscollapse' router :default-active="defaultActive" active-text-color="#409EFF" background-color="#32363f" text-color="#fff">
<!-- 一级菜单 -->
<el-sub-menu :index="item.menuId + ''" v-for="item in menus" :key="item.menuId">
<!-- 一级菜单内容 -->
<template #title>
<el-icon v-if="item.menuIcon != null && item.menuIcon !== ''">
<el-image style="width: 18px;height: 18px;" :src="'/imgs/meun/'+item.menuIcon" :fit="'fill'" />
</el-icon>
<el-icon v-else><icon-menu /></el-icon>
<span>{{ item.menuName }}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item :index="subItem.navigateUrl" v-for="subItem in item.childs" :key="subItem.menuId" @click="saveNav(subItem.navigateUrl)">
<!-- 二级菜单内容 -->
<template #title>
<el-icon v-if="subItem.menuIcon != null && item.menuIcon !== ''">
<el-image style="width: 18px;height: 18px;" :src="'/imgs/meun/'+subItem.menuIcon" :fit="'fill'" />
</el-icon>
<el-icon v-else><icon-menu /></el-icon>
<span>{{ subItem.menuName }}</span>
</template>
</el-menu-item>
</el-sub-menu>
</el-menu>
</div>
</el-scrollbar>
</template>
<style lang="less" scoped>
.ams-el-menu {
width: 100%;
height: 100%;
.menu-icon {
font-size: 18px;
margin-right: 6px;
}
}
.menu-search {
padding: 6px 10px;
::v-deep(.el-input__wrapper) {
border-radius: 15px !important;
}
}
:deep(.el-menu) {
background: rgba(0, 0, 0, 0.0)
}
/*隐藏文字*/
.el-menu--collapse .el-sub-menu__title span {
display: none;
}
/*隐藏 > */
.el-menu--collapse .el-sub-menu__title .el-sub-menu__icon-arrow {
display: none;
}
</style>
<script lang="ts" setup>
import { useStore } from 'vuex'
import { computed, ref, getCurrentInstance,onMounted } from 'vue'
import { onBeforeRouteUpdate } from 'vue-router'
import {
Menu as IconMenu
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
const searchValue = ref();
const router = useRouter();
const options = ref([]);
const store = useStore()
setTimeout(() => {
getoptions(); // 调用你的函数
}, 2000);
function getoptions(){
var menus = store.state.menus;
for(let i = 0;i < 100;i++){
if(menus[i] === undefined)break;
for(let j = 0;j < 100;j++){
if(menus[i].childs[j] === undefined)break;
options.value.push(menus[i].childs[j])
}
}
}
//定义默认展开
let defaultActive = ref('/home')
//定义常量接收仓库中的导航数据
const menus = computed(() => {
return store.state.menus
})
onMounted(()=>{
const isdefaultActive = window.sessionStorage.getItem('activePath')
if(isdefaultActive){
defaultActive.value = window.sessionStorage.getItem('activePath')
}
})
//监听当前路由发生变化
onBeforeRouteUpdate((to, from) => {
//设置高亮菜单
defaultActive.value = to.path
window.sessionStorage.setItem('activePath',to.path)
})
//获取点击菜单的路由地址
const saveNav=(path)=>{
defaultActive.value=path
window.sessionStorage.setItem('activePath',path)
}
const save=(routePath)=>{
defaultActive.value=routePath
window.sessionStorage.setItem('activePath',routePath)
router.push({ path: routePath});
}
</script>