zq
4 weeks ago
10 changed files with 278 additions and 108 deletions
|
After Width: | Height: | Size: 662 B |
@ -1,77 +1,101 @@ |
|||
<template> |
|||
<el-breadcrumb v-if="showBreadcrumb" separator="/"> |
|||
<el-breadcrumb-item |
|||
v-for="(item, index) in breadcrumbList" |
|||
:key="index" |
|||
> |
|||
<i v-if="item.icon" :class="item.icon"></i> |
|||
<span>{{ item.title }}</span> |
|||
</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
breadcrumbList: [], |
|||
showBreadcrumb: false // 控制是否显示面包屑导航 |
|||
}; |
|||
}, |
|||
watch: { |
|||
$route() { |
|||
this.updateBreadcrumb(); |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.updateBreadcrumb(); |
|||
}, |
|||
methods: { |
|||
updateBreadcrumb() { |
|||
const currentPath = this.$route.path; |
|||
// 判断是否为子页面 |
|||
if(!this.$parent.menuData)return |
|||
const isSubPage = this.isSubPage(currentPath); |
|||
this.showBreadcrumb = isSubPage; |
|||
|
|||
if (isSubPage) { |
|||
this.breadcrumbList = this.getBreadcrumbList(currentPath); |
|||
<div v-if="breadcrumbs.length > 0" class="breadcrumb-container"> |
|||
<nav> |
|||
<ol class="breadcrumb"> |
|||
<li |
|||
v-for="(item, index) in breadcrumbs" |
|||
:key="index" |
|||
class="breadcrumb-item" |
|||
:class="{ active: index === breadcrumbs.length - 1 }" |
|||
> |
|||
<template v-if="index !== breadcrumbs.length - 1"> |
|||
<router-link :to="item.path">{{ item.title }}</router-link> |
|||
<!-- <span class="separator">/</span> --> |
|||
<img class="separator" src="@/assets/separator.png" alt=""> |
|||
</template> |
|||
<template v-else> |
|||
<span>{{ item.title }}</span> |
|||
</template> |
|||
</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Breadcrumb', |
|||
computed: { |
|||
breadcrumbs() { |
|||
if (this.$route.meta.hideBreadcrumb) return [] |
|||
|
|||
const crumbs = [] |
|||
let currentRoute = this.$route |
|||
|
|||
// 递归查找所有父级路由 |
|||
while (currentRoute) { |
|||
crumbs.unshift({ |
|||
path: currentRoute.path, |
|||
title: this.getTitle(currentRoute) |
|||
}) |
|||
|
|||
// 通过 meta.breadcrumbParent 查找父级路由 |
|||
if (currentRoute.meta.breadcrumbParent) { |
|||
currentRoute = this.$router.options.routes.find( |
|||
r => r.name === currentRoute.meta.breadcrumbParent |
|||
) |
|||
} else { |
|||
this.breadcrumbList = []; |
|||
} |
|||
}, |
|||
isSubPage(path) { |
|||
console.log(this.$parent.menuData,'this.$parent.menuData=='); |
|||
// 判断当前路径是否为子页面 |
|||
for (const menu of this.$parent.menuData) { |
|||
for (const subMenu of menu.children) { |
|||
if (subMenu.path === path) { |
|||
return true; |
|||
} |
|||
} |
|||
currentRoute = null |
|||
} |
|||
return false; |
|||
}, |
|||
getBreadcrumbList(path) { |
|||
const breadcrumbList = []; |
|||
// 遍历菜单数据，查找匹配的面包屑路径 |
|||
for (const menu of this.$parent.menuData) { |
|||
for (const subMenu of menu.children) { |
|||
if (subMenu.path === path) { |
|||
breadcrumbList.push({ title: menu.title, icon: menu.icon }); |
|||
breadcrumbList.push({ title: subMenu.title }); |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
return breadcrumbList; |
|||
} |
|||
|
|||
return crumbs |
|||
} |
|||
}, |
|||
methods: { |
|||
getTitle(route) { |
|||
return typeof route.meta.title === 'function' |
|||
? route.meta.title(route) |
|||
: route.meta.title || route.name |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.el-breadcrumb { |
|||
margin-bottom: 20px; |
|||
} |
|||
</style> |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
/* 保持之前的样式不变 */ |
|||
.breadcrumb-container { |
|||
padding: 16px 12px; |
|||
background-color: #f5f5f5; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.breadcrumb { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 0; |
|||
margin: 0; |
|||
list-style: none; |
|||
} |
|||
|
|||
.breadcrumb-item { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.breadcrumb-item a { |
|||
color: #626573; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.breadcrumb-item.active span { |
|||
color: #1E2226;; |
|||
|
|||
} |
|||
|
|||
.separator { |
|||
/* margin: 0 5px; |
|||
color: #6c757d;; */ |
|||
width: 12px; |
|||
height: 12px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<el-breadcrumb v-if="showBreadcrumb" separator="/"> |
|||
<el-breadcrumb-item |
|||
v-for="(item, index) in breadcrumbList" |
|||
:key="index" |
|||
> |
|||
<i v-if="item.icon" :class="item.icon"></i> |
|||
<span>{{ item.title }}</span> |
|||
</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
breadcrumbList: [], |
|||
showBreadcrumb: false // 控制是否显示面包屑导航 |
|||
}; |
|||
}, |
|||
watch: { |
|||
$route() { |
|||
this.updateBreadcrumb(); |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.updateBreadcrumb(); |
|||
}, |
|||
methods: { |
|||
updateBreadcrumb() { |
|||
const currentPath = this.$route.path; |
|||
// 判断是否为子页面 |
|||
if(!this.$parent.menuData)return |
|||
const isSubPage = this.isSubPage(currentPath); |
|||
this.showBreadcrumb = isSubPage; |
|||
|
|||
if (isSubPage) { |
|||
this.breadcrumbList = this.getBreadcrumbList(currentPath); |
|||
} else { |
|||
this.breadcrumbList = []; |
|||
} |
|||
}, |
|||
isSubPage(path) { |
|||
console.log(this.$parent.menuData,'this.$parent.menuData=='); |
|||
// 判断当前路径是否为子页面 |
|||
for (const menu of this.$parent.menuData) { |
|||
for (const subMenu of menu.children) { |
|||
if (subMenu.path === path) { |
|||
return true; |
|||
} |
|||
} |
|||
} |
|||
return false; |
|||
}, |
|||
getBreadcrumbList(path) { |
|||
const breadcrumbList = []; |
|||
// 遍历菜单数据，查找匹配的面包屑路径 |
|||
for (const menu of this.$parent.menuData) { |
|||
for (const subMenu of menu.children) { |
|||
if (subMenu.path === path) { |
|||
breadcrumbList.push({ title: menu.title, icon: menu.icon }); |
|||
breadcrumbList.push({ title: subMenu.title }); |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
return breadcrumbList; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.el-breadcrumb { |
|||
margin-bottom: 20px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue