perf: navbar菜单active样式调整
This commit is contained in:
@ -9,7 +9,12 @@
|
||||
<icon-caret-down size="16" class="arco-icon-down !mr-0" />
|
||||
</a-button>
|
||||
<template #content>
|
||||
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDropdownClick(child)">
|
||||
<a-doption
|
||||
v-for="(child, ind) in item.children"
|
||||
:key="ind"
|
||||
@click="handleDropdownClick(child)"
|
||||
:class="{ active: child.includeRouteNames.includes(route.name) }"
|
||||
>
|
||||
<span class="menu-item-text"> {{ child.name }}</span>
|
||||
</a-doption>
|
||||
</template>
|
||||
@ -26,10 +31,12 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import router from '@/router';
|
||||
|
||||
const sidebarStore = useSidebarStore();
|
||||
const route = useRoute();
|
||||
|
||||
const selectedKey = computed(() => {
|
||||
return [String(sidebarStore.activeMenuId)];
|
||||
@ -37,6 +44,7 @@ const selectedKey = computed(() => {
|
||||
const menuList = computed(() => {
|
||||
return sidebarStore.menuList;
|
||||
});
|
||||
|
||||
const handleDropdownClick = (item) => {
|
||||
router.push({ name: item.routeName });
|
||||
};
|
||||
@ -59,11 +67,11 @@ const handleDropdownClick = (item) => {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
padding: 10px 24px;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
.menu-item-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-family: $font-family-regular;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
@ -71,10 +79,12 @@ const handleDropdownClick = (item) => {
|
||||
}
|
||||
}
|
||||
&:not(.arco-dropdown-option-disabled):hover {
|
||||
background-color: transparent;
|
||||
.arco-dropdown-option-content {
|
||||
border-radius: 8px;
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
}
|
||||
&.active {
|
||||
background: var(--Brand-Brand-1, #f0edff) !important;
|
||||
.menu-item-text {
|
||||
color: var(--Brand-Brand-6, #6d4cfe) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
.label {
|
||||
margin-right: 12px;
|
||||
color: #211f24;
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
.label {
|
||||
margin-right: 12px;
|
||||
color: #211f24;
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
|
||||
Reference in New Issue
Block a user