BreadCrumbs.vue
4.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<template>
<div class="breadcrumb-container">
<!--<span class="current-position">当前位置：</span>-->
<!--面包屑,1-->
<el-breadcrumb :separator-class="separatorClass" :separator="separator">
<template v-for="(item,index) in data">
<el-breadcrumb-item v-if="item.isLeaf" :key="item.name+index" :replace="item.replace" :to="{path:item.uri}">{{item.name}}</el-breadcrumb-item>
<el-breadcrumb-item v-else :key="item.name+index" :replace="item.replace">{{item.name}}</el-breadcrumb-item>
</template>
</el-breadcrumb>
<!--面包屑,1-->
</div>
</template>
<script type="text/javascript">
import { Breadcrumb, BreadcrumbItem } from "element-ui";
export default {
name: "BreadCrumbs",
props: {
separator: String,
separatorClass: String,
data: {
type: Array,
default: () => []
}
},
components: {
"el-breadcrumb": Breadcrumb,
"el-breadcrumb-item": BreadcrumbItem
},
methods: {
// 将路由数据转换成面包屑需要的格式
translateToCrumb(item) {
let name = item.name ? item.name : "首页";
const newItem = {
name: item.meta
? item.meta.title
? typeof item.meta.title === "function" &&
item.fullPath == this.$route.fullPath
? item.meta.title(this.$route)
: item.meta.title
: name
: name,
uri: item.fullPath ? item.fullPath : item.path,
replace: item.meta
? (typeof item.meta.isLeaf === "boolean" && item.meta.isLeaf) ||
item.meta.isLeaf === "true"
: false,
isLeaf: item.meta
? (typeof item.meta.isLeaf === "boolean" && item.meta.isLeaf) ||
item.meta.isLeaf === "true"
: false
};
return newItem;
},
getBreadcrumbInMenu(path,menuData) {
let breadcrumb = [];
const idIndex = menuData.find(item => item.routePath === path)
.idIndex;
if (typeof idIndex === "string" && idIndex.indexOf("-") > -1) {
const idIndexArr = idIndex.split("-");
let idIndexTemp = "";
idIndexArr.forEach((item, index) => {
if (0 === index) {
idIndexTemp = item;
} else {
idIndexTemp = idIndexTemp + "-" + item;
}
breadcrumb.push(
this.translateToCrumb(
menuData.find(mitem => mitem.idIndex === idIndexTemp)
)
);
});
}
return breadcrumb;
},
getBreadcrumb(menuData) {
const fullPath = this.$route.fullPath;
let breadcrumb = [];
// 注意：菜单数据中的path不可重复！否则，一个点击出现页签后，另一个点击无效，且面包屑展示的为菜单数组中最前的一个的
let isRouteExistInMenu = menuData.some(item => item.routePath === fullPath)
if (isRouteExistInMenu) {
breadcrumb = this.getBreadcrumbInMenu(fullPath,menuData);
} else {
const matched = this.$route.matched.filter(item => item.path);
const matchedLength = matched.length;
matched.forEach((el, index) => {
let mitem = matched[index];
if (index + 1 === matchedLength) {
mitem.fullPath = fullPath;
}
});
if (matched.length === 1) {
breadcrumb.push(this.translateToCrumb(this.$route));
} else {
// 查找matched中各项的path，如果该路由的path在菜单数据上存在，拼接出菜单中存在的部分
let matchedIndex = matched.findIndex(mitem => {
return menuData.some(item => item.routePath === mitem.path);
});
if (matchedIndex != -1) {
breadcrumb = this.getBreadcrumbInMenu(matched[matchedIndex].path,menuData);
}
// 再把matched后面的部分拼接到面包屑数据中
let matchedRemainder = matched.slice(matchedIndex + 1);
matchedRemainder.forEach((el, index) => {
if (el.name !== "index") {
if (index + 1 === matchedLength) {
el.fullPath = this.$route.fullPath;
}
breadcrumb.push(this.translateToCrumb(el));
}
});
}
}
return breadcrumb;
}
}
};
</script>
<style lang="less" scoped>
.breadcrumb-container {
width: 100%;
padding: 12px 0 16px;
line-height: 24px;
.current-position {
font-size: 14px;
margin-right: 8px;
}
/deep/ .el-breadcrumb{
.el-breadcrumb__item {
float: none;
&:last-child .el-breadcrumb__inner {
cursor: pointer;
color:var(--primary-color);
&:hover {
cursor: pointer;
}
}
}
}
}
</style>