feat: 导航栏子元素高亮时父元素高亮
This commit is contained in:
parent
387dff9a60
commit
1b7d3dae33
@ -1,21 +1,35 @@
|
||||
<script lang="ts" setup>
|
||||
import { usePageData } from '@vuepress/client'
|
||||
import type { NavItemWithChildren } from '../../../shared/index.js'
|
||||
import { computed } from 'vue'
|
||||
import type { NavItem, NavItemWithChildren } from '../../../shared/index.js'
|
||||
import { isActive } from '../../utils/index.js'
|
||||
import Flyout from '../Flyout/index.vue'
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
item: NavItemWithChildren
|
||||
}>()
|
||||
|
||||
const page = usePageData()
|
||||
|
||||
const isChildActive = (navItem: NavItem) => {
|
||||
if ('link' in navItem) {
|
||||
return isActive(
|
||||
page.value.path,
|
||||
navItem.link,
|
||||
!!props.item.activeMatch
|
||||
)
|
||||
} else {
|
||||
return navItem.items.some(isChildActive)
|
||||
}
|
||||
}
|
||||
const childrenActive = computed(() => isChildActive(props.item))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Flyout
|
||||
:class="{
|
||||
'navbar-menu-group': true,
|
||||
'active': isActive(page.path, item.activeMatch, !!item.activeMatch),
|
||||
'active': isActive(page.path, item.activeMatch, !!item.activeMatch) || childrenActive,
|
||||
}"
|
||||
:button="item.text"
|
||||
:items="item.items"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user