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