Breadcrumb

This commit is contained in:
LittleSheep 2024-09-28 15:30:13 +08:00
parent 1ccb9e738e
commit 608bdc5d28
2 changed files with 25 additions and 7 deletions

View File

@ -61,6 +61,13 @@
</v-navigation-drawer>
<v-main>
<v-sheet color="grey-lighten-8" v-if="breadcrumb.length >= 1">
<div class="flex items-center justify-center h-[60px] px-5">
<v-breadcrumbs :items="breadcrumb" density="compact"></v-breadcrumbs>
</div>
<v-divider class="border-opacity-50" />
</v-sheet>
<slot />
</v-main>
</template>
@ -71,10 +78,19 @@ import Logo from "../assets/logo-w-shadow.png"
const { locale } = useI18n()
const route = useRoute()
const breadcrumb = computed(() => {
const arr = route.path.replace(/^\/|\/$/g, "").split("/")
arr.shift()
return arr.map((x, idx) => ({
title: x,
to: `/docs/${arr.slice(0, idx+1).join("/")}`,
}))
})
const navNotRoot = computed(() => route.path.split("/").length > 2)
const navQuery = computed(() => ({
where: {
_path: new RegExp("^\\" + route.path + "\\/[^\\/]+\\/?$"),
_path: new RegExp("^\\/" + route.path.replace(/^\/|\/$/g, '') + "\\/[^\\/]+\\/?$"),
_locale: getLocale(locale),
},
}))

View File

@ -17,12 +17,14 @@
</article>
</div>
<v-navigation-drawer app v-model="drawerOpen" floating location="right" width="320">
<v-tabs v-model="drawerTab" hide-slider align-tabs="center">
<v-tab :value="1">
<v-icon icon="mdi-table-of-contents" />
</v-tab>
</v-tabs>
<v-navigation-drawer app v-model="drawerOpen" floating location="right" width="300">
<div class="h-[60px] flex justify-center items-center">
<v-tabs v-model="drawerTab" hide-slider align-tabs="center">
<v-tab :value="1">
<v-icon icon="mdi-table-of-contents" />
</v-tab>
</v-tabs>
</div>
<v-divider class="border-opacity-50 mb-1" />