<template>
|
<div :class="['breadcrumb-box mask-image', !globalStore.breadcrumbIcon && 'no-icon']">
|
<el-breadcrumb :separator-icon="ArrowRight">
|
<transition-group name="breadcrumb">
|
<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
|
<div
|
class="el-breadcrumb__inner is-link"
|
:class="{ 'item-no-icon': !item.meta.icon }"
|
@click="onBreadcrumbClick(item, index)"
|
>
|
<el-icon v-if="item.meta.icon && globalStore.breadcrumbIcon" class="breadcrumb-icon">
|
<component :is="item.meta.icon"></component>
|
</el-icon>
|
<span class="breadcrumb-title">{{ getMenuTitle(item) }}</span>
|
</div>
|
</el-breadcrumb-item>
|
</transition-group>
|
</el-breadcrumb>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { computed } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
import { ArrowRight } from "@element-plus/icons-vue";
|
import { useAuthStore } from "@/stores/modules/auth";
|
import { useGlobalStore } from "@/stores/modules/global";
|
|
const route = useRoute();
|
const router = useRouter();
|
const authStore = useAuthStore();
|
const globalStore = useGlobalStore();
|
// 获取当前语言
|
const currentLanguage = computed(() => globalStore.language);
|
const breadcrumbList = computed(() => {
|
let breadcrumbData = authStore.breadcrumbListGet[route.matched[route.matched.length - 1].path] ?? [];
|
// 🙅♀️不需要首页面包屑可删除以下判断
|
|
return breadcrumbData;
|
});
|
const getMenuTitle = (subItem: Menu.MenuOptions) => {
|
// 如果是英文且存在英文标题，则使用英文标题
|
if (currentLanguage.value === "en" && subItem.meta.entitle) {
|
return subItem.meta.entitle;
|
}
|
// 否则使用默认标题
|
return subItem.meta.title;
|
};
|
// Click Breadcrumb
|
const onBreadcrumbClick = (item: Menu.MenuOptions, index: number) => {
|
if (index !== breadcrumbList.value.length - 1) router.push(item.path);
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.breadcrumb-box {
|
display: flex;
|
align-items: center;
|
overflow: hidden;
|
.el-breadcrumb {
|
white-space: nowrap;
|
.el-breadcrumb__item {
|
position: relative;
|
display: inline-block;
|
float: none;
|
.item-no-icon {
|
transform: translateY(-3px);
|
}
|
.el-breadcrumb__inner {
|
display: inline-flex;
|
&.is-link {
|
color: var(--el-header-text-color);
|
&:hover {
|
color: var(--el-color-primary);
|
}
|
}
|
.breadcrumb-icon {
|
margin-top: 1px;
|
margin-right: 6px;
|
font-size: 16px;
|
}
|
.breadcrumb-title {
|
margin-top: 2px;
|
}
|
}
|
&:last-child .el-breadcrumb__inner,
|
&:last-child .el-breadcrumb__inner:hover {
|
color: var(--el-header-text-color-regular);
|
}
|
:deep(.el-breadcrumb__separator) {
|
transform: translateY(-1px);
|
}
|
}
|
}
|
}
|
.no-icon {
|
.el-breadcrumb {
|
.el-breadcrumb__item {
|
top: -2px;
|
:deep(.el-breadcrumb__separator) {
|
top: 4px;
|
}
|
.item-no-icon {
|
transform: translateY(0);
|
}
|
}
|
}
|
}
|
</style>
|
