56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
<template>
|
|
<div class="breadcrumb-wrapper">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
<template v-for="item in levelList" :key="item.path">
|
|
<el-breadcrumb-item v-if="item.meta?.title && (item.meta.breadcrumb === undefined || item.meta.breadcrumb === true)" :to="item.path !== route.path ? { path: item.path } : ''">
|
|
{{ item.meta.title }}
|
|
</el-breadcrumb-item>
|
|
</template>
|
|
</el-breadcrumb>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
|
|
const levelList = computed(() => {
|
|
const matched = route.matched.filter(item => item.meta?.title)
|
|
return matched
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.breadcrumb-wrapper {
|
|
background: #ffffff;
|
|
padding: 10px 20px;
|
|
border-bottom: 1px solid #e4e4e4;
|
|
margin-top: 48px;
|
|
}
|
|
|
|
:deep(.el-breadcrumb) {
|
|
font-size: 13px;
|
|
}
|
|
|
|
:deep(.el-breadcrumb__item) {
|
|
color: #666666;
|
|
|
|
&:hover {
|
|
color: #4a90d9;
|
|
}
|
|
}
|
|
|
|
:deep(.el-breadcrumb__item:last-child) {
|
|
color: #333333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
:deep(.el-breadcrumb__separator) {
|
|
color: #cccccc;
|
|
margin: 0 8px;
|
|
}
|
|
</style>
|