<template>
|
<div class="crumbs">
|
<div class="breadcrumbBox" v-if="crumbsData.length > 0">
|
<p style="float: left">位置：</p>
|
<div :class="!item.path && !item.pathName
|
? 'breadcrumbItem'
|
: index == crumbsData.length - 1
|
? 'breadcrumbItem'
|
: 'breadcrumbItem isLink'
|
" v-for="(item, index) in crumbsData" :key="index" @click="toPage(item, index)">
|
<span :title="item.name">{{ item.name }}</span>
|
<el-icon class="breadcrumbIcon" v-if="index < crumbsData.length - 1">
|
<ArrowRight />
|
</el-icon>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, watch } from 'vue'
|
import { useBreadcrumbStore } from '@/store'
|
import { useRouter } from 'vue-router'
|
const props = defineProps<{ type: string; crumbsKey: string }>()
|
const router = useRouter()
|
const crumbStore = useBreadcrumbStore()
|
const crumbsData = ref()
|
|
watch(
|
[() => props.crumbsKey, () => props.type],
|
(newValue, oldValue) => {
|
crumbsData.value = crumbStore.crumbList[props.type][props.crumbsKey]
|
},
|
{ immediate: true, deep: true }
|
)
|
const toPage = (data: any, index: any) => {
|
if (index < crumbsData.value.length - 1 && (data.path || data.pathName)) {
|
// 判断是否需要记录面包屑
|
if (data.isCrumbs) {
|
let saveData = crumbsData.value.filter(
|
(cItem: any, cIndex: any) => cIndex != 0 && cIndex <= index
|
)
|
crumbStore.setCrumbs({
|
type: data.type,
|
data: saveData,
|
callback: (key: any) => {
|
let query = { ...data.query, crumbsKey: key }
|
if (data.pathName) {
|
router.push({
|
name: data.pathName,
|
query: query
|
})
|
}
|
if (data.path) {
|
router.push({
|
path: data.path,
|
query: query
|
})
|
}
|
}
|
})
|
} else {
|
router.push({
|
name: data.pathName,
|
path: data.path,
|
query: data.query
|
})
|
}
|
}
|
return false
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.crumbs {
|
width: 100%;
|
|
// padding: 6px 0;
|
.breadcrumbBox {
|
font-size: 14px;
|
overflow: hidden;
|
height: 60px;
|
display: flex;
|
align-items: center;
|
|
p {
|
height: 20px;
|
line-height: 20px;
|
}
|
|
.breadcrumbItem {
|
max-width: 200px;
|
display: flex;
|
align-items: center;
|
height: 20px;
|
line-height: 20px;
|
float: left;
|
color: #545c63;
|
|
&.isLink {
|
text-decoration: none;
|
transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
color: #303133;
|
|
&:hover {
|
color: #ff6c00;
|
cursor: pointer;
|
}
|
}
|
|
.breadcrumbIcon {
|
margin: 0 6px;
|
font-weight: 400;
|
color: #545c63;
|
}
|
span {
|
width: 100%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
}
|
|
img {
|
width: 100%;
|
height: 5px;
|
}
|
}
|
</style>
|
