From bd832982f2697f80650c3c0e83331323039b6faf Mon Sep 17 00:00:00 2001
From: odc.xiaohui <xiaohui@Q1>
Date: 星期五, 10 二月 2023 16:25:44 +0800
Subject: [PATCH] 2023/2/10 肖辉 修改侧边导航高亮
---
src/views/layout/components/Menu/index.vue | 33 +++++++++++++++++++++------------
1 files changed, 21 insertions(+), 12 deletions(-)
diff --git a/src/views/layout/components/Menu/index.vue b/src/views/layout/components/Menu/index.vue
index 5c71c7f..cc37bb7 100644
--- a/src/views/layout/components/Menu/index.vue
+++ b/src/views/layout/components/Menu/index.vue
@@ -5,9 +5,12 @@
<h2 class="siderbar-title" @click="toHome()">閬傛槍鎵ф硶骞冲彴</h2>
<el-scrollbar>
<!-- 璺敱 -->
- <el-menu router class="el-menu-vertical" :default-active="$route.path">
+ <el-menu router
+ class="el-menu-vertical"
+ :default-active="$route.path.name"
+ @select="handleSelect">
<el-submenu
- :index="menu.url ? menu.url : menu.id.toString()"
+ :index="String(menu.id)"
v-for="menu in menuList"
:key="menu.id"
class="firstMenu"
@@ -23,9 +26,7 @@
<el-submenu
:key="secondMenu.id"
v-if="secondMenu.menuVoArrayList.length > 0"
- :index="
- secondMenu.url ? secondMenu.url : secondMenu.id.toString()
- "
+ :index="secondMenu.url ? secondMenu.url : secondMenu.id.toString()"
class="secondMenu"
>
<template slot="title">
@@ -39,16 +40,13 @@
>{{ thirdMenu.title }}</el-menu-item
>
</el-submenu>
-
<el-menu-item
v-else
:index="`${secondMenu.id}`"
:route="{ name: secondMenu.url }"
- >{{ secondMenu.title }}</el-menu-item
- >
+ >{{ secondMenu.title }}</el-menu-item>
</template>
</template>
-
<el-menu-item
v-else
:key="menu.id"
@@ -71,16 +69,27 @@
data() {
return {
menuList: [],
+ isActive:''
};
},
created() {
this.loadMenu();
},
+ watch: {
+ $route(){
+ this.handleSelect(this.$route.fullPath)
+ console.log(this.$route)
+ }
+ },
methods: {
+ handleSelect(path){
+ this.isActive = path
+ },
loadMenu() {
const userName = sessionStorage.getItem('name');
users.getMenu({ name: userName })
.then(res => {
+ console.log(res)
this.menuList = res.menus;
sessionStorage.setItem('user', JSON.stringify(res));
})
@@ -155,13 +164,13 @@
}
.el-menu-item:hover {
- background-color: #092c4a;
+ background-color: #409EFF;
color: #22d3eb;
}
.is-active {
- background-color: #313350;
- color: #22d3eb;
+ background-color: #409EFF;
+ color: #fff;
}
}
--
Gitblit v1.8.0