<template>
|
<div class="route-nav">
|
<el-text class="font-bold" v-if="browser.isMini">
|
{{ lastName }}
|
</el-text>
|
|
<template v-else>
|
<el-breadcrumb :separator-icon="ArrowRightBold">
|
<el-breadcrumb-item v-for="(item, index) in list" :key="index">
|
<span class="text-[14px]">{{ item.meta?.label || item.name }}</span>
|
</el-breadcrumb-item>
|
</el-breadcrumb>
|
</template>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
defineOptions({
|
name: 'route-nav'
|
});
|
|
import { computed } from 'vue';
|
import { flattenDeep, last } from 'lodash-es';
|
import { ArrowRightBold } from '@element-plus/icons-vue';
|
import { useCool } from '/@/cool';
|
import { useBase } from '/$/base';
|
|
const { route, browser } = useCool();
|
const { menu } = useBase();
|
|
// 数据列表
|
const list = computed(() => {
|
function deep(item: any) {
|
if (route.path === '/') {
|
return false;
|
}
|
|
if (item.path == route.path) {
|
return item;
|
} else {
|
if (item.children) {
|
const ret = item.children.map(deep).find(Boolean);
|
|
if (ret) {
|
return [item, ret];
|
} else {
|
return false;
|
}
|
} else {
|
return false;
|
}
|
}
|
}
|
|
return flattenDeep(menu.group.map(deep).filter(Boolean));
|
});
|
|
// 最后一个节点名称
|
const lastName = computed(() => last(list.value)?.meta?.label);
|
</script>
|
|
<style lang="scss" scoped>
|
.route-nav {
|
white-space: nowrap;
|
user-select: none;
|
margin-right: 10px;
|
|
:deep(.el-breadcrumb) {
|
.el-breadcrumb__separator {
|
font-size: 10px;
|
margin: 0 10px;
|
}
|
|
.el-breadcrumb__inner {
|
color: var(--el-text-color-regular);
|
}
|
|
.el-breadcrumb__item {
|
&:last-child {
|
.el-breadcrumb__inner {
|
color: var(--el-text-color-primary);
|
}
|
}
|
}
|
}
|
}
|
</style>
|
