44 lines
1.5 KiB
Vue
44 lines
1.5 KiB
Vue
|
<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>
|
||
|
|
<component :is="breadcrumb.icon" v-if="theme.header.crumb.showIcon" class="inline-block mr-4px text-16px" />
|
||
|
|
<span>{{ breadcrumb.label }}</span>
|
||
|
|
</span>
|
||
|
|
</n-dropdown>
|
||
|
|
<template v-else>
|
||
|
|
<component :is="breadcrumb.icon" v-if="theme.header.crumb.showIcon" class="inline-block mr-4px text-16px" />
|
||
|
|
<span>{{ breadcrumb.label }}</span>
|
||
|
|
</template>
|
||
|
|
</n-breadcrumb-item>
|
||
|
|
</template>
|
||
|
|
</n-breadcrumb>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { useRoute } from 'vue-router';
|
||
|
|
import { NBreadcrumb, NBreadcrumbItem, NDropdown } from 'naive-ui';
|
||
|
|
import { routePath } from '@/router';
|
||
|
|
import { useThemeStore, useRouteStore } from '@/store';
|
||
|
|
import { useRouterPush } from '@/composables';
|
||
|
|
import { getBreadcrumbByRouteKey } from '@/utils';
|
||
|
|
import type { GlobalMenuOption } from '@/interface';
|
||
|
|
|
||
|
|
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>
|