skytek_xinliang
41 lines
1.4 KiB
Vue
41 lines
1.4 KiB
Vue
<template>
|
|
<v-col
|
|
v-if="features.showBreadcrumb && showBreadcrumbBar && !isMobile"
|
|
class="d-flex align-center justify-space-between pr-2 pl-3 py-1 bg-surface">
|
|
<v-breadcrumbs class="pa-0" density="compact" :items="breadcrumbItems">
|
|
<template #prepend>
|
|
<v-btn
|
|
v-if="features.showFavorites && !showFavoritesBar" class="mr-2" color="primary" size="small"
|
|
variant="outlined" @click="emit('toggle-favorites-bar', true)">
|
|
常用
|
|
</v-btn>
|
|
</template>
|
|
<template #item="{ item }">
|
|
<div class="d-flex align-center ga-1">
|
|
<v-icon v-if="item.icon" class="mr-1" size="14" :icon="item.icon" />
|
|
<span class="text-caption text-no-wrap">{{ item.title }}</span>
|
|
</div>
|
|
</template>
|
|
<template #divider>
|
|
<v-icon color="primary-variant" size="12" :icon="mdiChevronRight" />
|
|
</template>
|
|
</v-breadcrumbs>
|
|
<div class="page-actions">
|
|
<slot name="breadcrumb-actions"></slot>
|
|
</div>
|
|
</v-col>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { mdiChevronRight } from '@mdi/js'
|
|
defineProps({
|
|
features: { type: Object, default: () => ({}) },
|
|
showBreadcrumbBar: { type: Boolean, default: true },
|
|
isMobile: { type: Boolean, default: false },
|
|
breadcrumbItems: { type: Array, default: () => [] },
|
|
showFavoritesBar: { type: Boolean, default: true },
|
|
})
|
|
|
|
const emit = defineEmits(['toggle-favorites-bar'])
|
|
</script>
|