2022-01-11 19:03:42 +08:00
|
|
|
<template>
|
|
|
|
<n-breadcrumb class="px-12px">
|
|
|
|
<template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.key">
|
|
|
|
<n-breadcrumb-item>
|
|
|
|
<n-dropdown v-if="breadcrumb.hasChildren" :options="breadcrumb.children" @select="dropdownSelect">
|
|
|
|
<span>
|
2022-01-18 01:17:09 +08:00
|
|
|
<component
|
|
|
|
:is="breadcrumb.icon"
|
|
|
|
v-if="theme.header.crumb.showIcon"
|
|
|
|
class="inline-block align-text-bottom mr-4px text-16px"
|
|
|
|
/>
|
2022-01-11 19:03:42 +08:00
|
|
|
<span>{{ breadcrumb.label }}</span>
|
|
|
|
</span>
|
|
|
|
</n-dropdown>
|
|
|
|
<template v-else>
|
2022-02-23 02:27:22 +08:00
|
|
|
<component
|
|
|
|
:is="breadcrumb.icon"
|
|
|
|
v-if="theme.header.crumb.showIcon"
|
|
|
|
class="inline-block align-text-bottom mr-4px text-16px"
|
2022-04-29 15:53:12 +08:00
|
|
|
:class="theme.header.inverted && 'text-#BBBBBB'"
|
2022-02-23 02:27:22 +08:00
|
|
|
/>
|
2022-04-29 15:53:12 +08:00
|
|
|
<span :class="theme.header.inverted && 'text-#BBBBBB'">{{ breadcrumb.label }}</span>
|
2022-01-11 19:03:42 +08:00
|
|
|
</template>
|
|
|
|
</n-breadcrumb-item>
|
|
|
|
</template>
|
|
|
|
</n-breadcrumb>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { computed } from 'vue';
|
|
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import { routePath } from '@/router';
|
|
|
|
import { useThemeStore, useRouteStore } from '@/store';
|
|
|
|
import { useRouterPush } from '@/composables';
|
|
|
|
import { getBreadcrumbByRouteKey } from '@/utils';
|
|
|
|
|
|
|
|
const route = useRoute();
|
|
|
|
const theme = useThemeStore();
|
|
|
|
const routeStore = useRouteStore();
|
|
|
|
const { routerPush } = useRouterPush();
|
|
|
|
|
|
|
|
const breadcrumbs = computed(() =>
|
|
|
|
getBreadcrumbByRouteKey(route.name as string, routeStore.menus as GlobalMenuOption[], routePath('root'))
|
|
|
|
);
|
|
|
|
|
|
|
|
function dropdownSelect(key: string) {
|
|
|
|
routerPush({ name: key });
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped></style>
|