优化menu全局状态,合并setHeaderActived和switchHeaderActived两个action

This commit is contained in:
hooray 2022-02-04 03:08:35 +08:00
parent 4ab6d83c16
commit af9eb0cb06
7 changed files with 26 additions and 25 deletions

View File

@ -179,8 +179,8 @@ const settings = ref(globalSettings)
watch(() => settings, () => {
settingsStore.updateThemeSetting(settings.value)
menuStore.switchHeaderActived(0)
settings.value.menu.menuMode !== 'single' && menuStore.setHeaderActived(route.fullPath)
menuStore.setActived(0)
settings.value.menu.menuMode !== 'single' && menuStore.setActived(route.fullPath)
}, {
deep: true
})

View File

@ -7,7 +7,7 @@
<!-- 顶部模式 -->
<div class="nav">
<template v-for="(item, index) in menuStore.allMenus">
<div v-if="item.children && item.children.length !== 0" :key="index" class="item" :class="{'active': index == menuStore.headerActived}" @click="switchMenu(index)">
<div v-if="item.children && item.children.length !== 0" :key="index" class="item" :class="{'active': index == menuStore.actived}" @click="switchMenu(index)">
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
<span v-if="item.meta.title">{{ item.meta.title }}</span>
</div>

View File

@ -8,7 +8,7 @@
<div
v-if="item.children && item.children.length !== 0" :key="index" :class="{
'item': true,
'active': index === menuStore.headerActived
'active': index === menuStore.actived
}" :title="item.meta.title" @click="switchMenu(index)"
>
<svg-icon v-if="item.meta.icon" :name="item.meta.icon" />

View File

@ -90,7 +90,7 @@ function reload() {
provide('switchMenu', switchMenu)
function switchMenu(index) {
menuStore.switchHeaderActived(index)
menuStore.setActived(index)
if (settingsStore.menu.switchMainMenuAndPageJump) {
if (isExternalLink(menuStore.sidebarMenusFirstDeepestPath)) {
window.open(menuStore.sidebarMenusFirstDeepestPath, '_blank')

View File

@ -152,7 +152,7 @@ router.beforeEach(async(to, from, next) => {
// 是否已根据权限动态生成并挂载路由
if (routeOutsideStore.isGenerate) {
// 导航栏如果不是 single 模式,则需要根据 path 定位主导航的选中状态
settingsOutsideStore.menu.menuMode !== 'single' && menuOutsideStore.setHeaderActived(to.path)
settingsOutsideStore.menu.menuMode !== 'single' && menuOutsideStore.setActived(to.path)
if (to.name) {
if (to.matched.length !== 0) {
// 如果已登录状态下,进入登录页会强制跳转到控制台页面

View File

@ -34,7 +34,7 @@ export const useMenuStore = defineStore(
'menu',
{
state: () => ({
headerActived: 0
actived: 0
}),
getters: {
// 完整导航数据
@ -54,7 +54,7 @@ export const useMenuStore = defineStore(
},
// 次导航数据
sidebarMenus() {
return this.allMenus.length > 0 ? this.allMenus[this.headerActived].children : []
return this.allMenus.length > 0 ? this.allMenus[this.actived].children : []
},
// 次导航里第一个导航的路径
sidebarMenusFirstDeepestPath() {
@ -73,22 +73,23 @@ export const useMenuStore = defineStore(
}
},
actions: {
// 根据路由判断属于哪个头部导航
setHeaderActived(path) {
const routeStore = useRouteStore()
routeStore.routes.map((item, index) => {
if (
item.children.some(r => {
return path.indexOf(r.path + '/') === 0 || path == r.path
})
) {
this.headerActived = index
}
})
},
// 切换头部导航
switchHeaderActived(index) {
this.headerActived = index
// 切换主导航
setActived(data) {
if (typeof data === 'number') {
// 如果是 number 类型,则认为是主导航的索引
this.actived = data
} else {
// 如果是 string 类型,则认为是路由,需要查找对应的主导航索引
this.allMenus.map((item, index) => {
if (
item.children.some(r => {
return data.indexOf(r.path + '/') === 0 || data == r.path
})
) {
this.actived = index
}
})
}
}
}
}

View File

@ -56,7 +56,7 @@ export const useUserStore = defineStore(
this.token = ''
this.failure_time = ''
routeStore.removeRoutes()
menuStore.switchHeaderActived(0)
menuStore.setActived(0)
resolve()
})
},