62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { compile } from 'path-to-regexp'
|
|
import Breadcrumb from '../../../Breadcrumb/index.vue'
|
|
import BreadcrumbItem from '../../../Breadcrumb/item.vue'
|
|
|
|
const route = useRoute()
|
|
|
|
const settingsStore = useSettingsStore()
|
|
|
|
// 面包屑备份
|
|
let breadcrumbListBackup: any = []
|
|
const breadcrumbList = computed(() => {
|
|
if (route.name === 'reload') {
|
|
return breadcrumbListBackup
|
|
}
|
|
const list = []
|
|
if (settingsStore.settings.home.enable) {
|
|
list.push({
|
|
path: settingsStore.settings.home.fullPath,
|
|
title: settingsStore.settings.home.title,
|
|
})
|
|
}
|
|
route.matched.forEach((item) => {
|
|
if (item.meta?.breadcrumb !== false) {
|
|
list.push({
|
|
path: item.path,
|
|
title: item.meta?.title,
|
|
})
|
|
}
|
|
})
|
|
breadcrumbListBackup = list
|
|
return list
|
|
})
|
|
|
|
function pathCompile(path: string) {
|
|
const toPath = compile(path)
|
|
return toPath(route.params)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Breadcrumb v-if="settingsStore.mode === 'pc' && settingsStore.settings.app.routeBaseOn !== 'filesystem'" class="breadcrumb whitespace-nowrap px-2">
|
|
<TransitionGroup name="breadcrumb">
|
|
<BreadcrumbItem v-for="(item, index) in breadcrumbList" :key="`${index}_${item.path}_${item.title}`" :to="Number(index) < breadcrumbList.length - 1 && item.path !== '' ? pathCompile(item.path) : ''">
|
|
{{ item.title }}
|
|
</BreadcrumbItem>
|
|
</TransitionGroup>
|
|
</Breadcrumb>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 面包屑动画 */
|
|
.breadcrumb-enter-active {
|
|
transition: transform 0.3s, opacity 0.3s;
|
|
}
|
|
|
|
.breadcrumb-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(30px) skewX(-50deg);
|
|
}
|
|
</style>
|