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
<template>
<el-scrollbar>
<div class="ams-el-menu">
<!-- <div class="menu-search">
<el-select placement="bottom" v-model="searchValue" clearable filterable remote reserve-keyword
:placeholder="'请输入关键字搜索...'" :remote-method="remoteMethod" @change="selectChange" :loading="loading">
<template #prefix><i class="el-icon-search"></i></template>
<el-option v-for="item in menus" :key="item.menuId" :label="item.menuName" :value="item.menuName" />
</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'
// const searchValue = ref('');
// const proxy = getCurrentInstance();
// const props = defineProps(['meun', 'thisIndex']);
// const emit = defineEmits(['subEvent']);
// const options = ref([]);
// const loading = ref(false);
const store = useStore()
//定义默认展开
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)
}
</script>