93 lines
1.8 KiB
Vue
93 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div class="breadcrumb" v-if="items && items.length > 0">
|
||
|
|
<span v-for="(item, index) in items" :key="index" class="breadcrumb-wrapper">
|
||
|
|
<span class="breadcrumb-item">
|
||
|
|
<!-- 最后一个项目不可点击 -->
|
||
|
|
<template v-if="index === items.length - 1">
|
||
|
|
<span class="breadcrumb-text current">{{ item.title }}</span>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<!-- 其他项目可点击 -->
|
||
|
|
<template v-else>
|
||
|
|
<router-link
|
||
|
|
:to="item.path"
|
||
|
|
class="breadcrumb-link"
|
||
|
|
v-if="item.path"
|
||
|
|
>
|
||
|
|
{{ item.title }}
|
||
|
|
</router-link>
|
||
|
|
<span class="breadcrumb-text" v-else>{{ item.title }}</span>
|
||
|
|
</template>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<!-- 分隔符 -->
|
||
|
|
<span class="breadcrumb-separator" v-if="index < items.length - 1">
|
||
|
|
<i class="separator-icon"></i>
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
// 面包屑项目接口
|
||
|
|
interface BreadcrumbItem {
|
||
|
|
title: string;
|
||
|
|
path?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Props
|
||
|
|
interface Props {
|
||
|
|
items: BreadcrumbItem[];
|
||
|
|
separator?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
withDefaults(defineProps<Props>(), {
|
||
|
|
separator: '/'
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.breadcrumb {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.breadcrumb-item {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.breadcrumb-link {
|
||
|
|
color: #1890ff;
|
||
|
|
text-decoration: none;
|
||
|
|
transition: color 0.2s ease;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: #40a9ff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.breadcrumb-text {
|
||
|
|
color: inherit;
|
||
|
|
|
||
|
|
&.current {
|
||
|
|
color: #333;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.breadcrumb-separator {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
margin: 0 8px;
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.separator-icon::before {
|
||
|
|
content: "/";
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
</style>
|