|
|
<template>
|
|
|
<!-- 面包屑导航组件 -->
|
|
|
<el-breadcrumb class="app-breadcrumb" separator="(●'◡'●)" style="height:50px;backgroundColor:rgba(79, 73, 73, 1);borderRadius:0px;padding:0px 20px 0px 20px;boxShadow:;borderWidth:2px;borderStyle:;borderColor:rgba(193, 180, 180, 0.5);">
|
|
|
<!-- 动画过渡效果的面包屑项容器 -->
|
|
|
<transition-group name="breadcrumb" class="box" :style="1==1?'justifyContent:flex-start;':1==2?'justifyContent:center;':'justifyContent:flex-end;'">
|
|
|
<!-- 遍历生成面包屑项 -->
|
|
|
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
|
|
|
<!-- 如果是最后一项或设置了 noRedirect，则显示为不可点击文本 -->
|
|
|
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.name }}</span>
|
|
|
<!-- 否则显示为可点击链接 -->
|
|
|
<a v-else @click.prevent="handleLink(item)">{{ item.name }}</a>
|
|
|
</el-breadcrumb-item>
|
|
|
</transition-group>
|
|
|
</el-breadcrumb>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import pathToRegexp from 'path-to-regexp' // 导入路径正则表达式库
|
|
|
import { generateTitle } from '@/utils/i18n' // 导入标题生成工具方法
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
levelList: null // 存储面包屑层级数据
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
// 监听路由变化，动态更新面包屑
|
|
|
$route() {
|
|
|
this.getBreadcrumb()
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.getBreadcrumb() // 初始化时获取面包屑数据
|
|
|
this.breadcrumbStyleChange() // 初始化时修改面包屑样式
|
|
|
},
|
|
|
methods: {
|
|
|
generateTitle, // 注册标题生成方法
|
|
|
getBreadcrumb() {
|
|
|
// 只显示带有 meta.title 的路由
|
|
|
let route = this.$route // 获取当前路由
|
|
|
let matched = route.matched.filter(item => item.meta) // 过滤出包含 meta 的路由
|
|
|
const first = matched[0] // 获取第一个匹配的路由
|
|
|
matched = [{ path: '/index' }].concat(matched) // 将首页路径拼接到匹配路由前
|
|
|
|
|
|
this.levelList = matched.filter(item => item.meta) // 更新面包屑层级数据
|
|
|
},
|
|
|
isDashboard(route) {
|
|
|
const name = route && route.name // 获取路由名称
|
|
|
if (!name) {
|
|
|
return false // 如果没有名称，返回 false
|
|
|
}
|
|
|
return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase() // 判断是否为首页
|
|
|
},
|
|
|
pathCompile(path) {
|
|
|
// 解决动态路由参数问题 (参考 GitHub 问题 #561)
|
|
|
const { params } = this.$route // 获取当前路由参数
|
|
|
var toPath = pathToRegexp.compile(path) // 编译路径
|
|
|
return toPath(params) // 返回编译后的路径
|
|
|
},
|
|
|
handleLink(item) {
|
|
|
const { redirect, path } = item // 获取重定向路径和普通路径
|
|
|
if (redirect) {
|
|
|
this.$router.push(redirect) // 如果有重定向路径，则跳转到该路径
|
|
|
return
|
|
|
}
|
|
|
this.$router.push(path) // 否则跳转到指定路径
|
|
|
},
|
|
|
breadcrumbStyleChange(val) {
|
|
|
this.$nextTick(() => { // 确保 DOM 已更新后再执行样式修改
|
|
|
// 修改分隔符样式
|
|
|
document.querySelectorAll('.app-breadcrumb .el-breadcrumb__separator').forEach(el => {
|
|
|
el.innerText = "(●'◡'●)" // 设置自定义分隔符
|
|
|
el.style.color = "rgba(235, 90, 170, 1)" // 设置分隔符颜色
|
|
|
})
|
|
|
// 修改可点击链接的文字颜色
|
|
|
document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner a').forEach(el => {
|
|
|
el.style.color = "rgba(196, 212, 244, 1)"
|
|
|
})
|
|
|
// 修改不可点击文字的颜色
|
|
|
document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner .no-redirect').forEach(el => {
|
|
|
el.style.color = "rgba(244, 149, 32, 1)"
|
|
|
})
|
|
|
|
|
|
let str = "vertical" // 假设布局为垂直
|
|
|
if ("vertical" === str) {
|
|
|
let headHeight = "60px" // 设置头部高度
|
|
|
headHeight = parseInt(headHeight) + 10 + 'px' // 调整高度
|
|
|
document.querySelectorAll('.app-breadcrumb').forEach(el => {
|
|
|
el.style.marginTop = headHeight // 设置面包屑顶部外边距
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.app-breadcrumb {
|
|
|
display: block; // 设置为块级元素
|
|
|
font-size: 14px; // 设置字体大小
|
|
|
line-height: 50px; // 设置行高
|
|
|
|
|
|
.box {
|
|
|
display: flex; // 使用弹性布局
|
|
|
width: 100%; // 宽度占满父容器
|
|
|
height: 100%; // 高度占满父容器
|
|
|
justify-content: flex-start; // 主轴对齐方式为左对齐
|
|
|
align-items: center; // 交叉轴对齐方式为居中
|
|
|
}
|
|
|
|
|
|
.no-redirect {
|
|
|
color: #97a8be; // 设置不可点击文字的颜色
|
|
|
cursor: text; // 设置鼠标悬停时的样式为文本
|
|
|
}
|
|
|
}
|
|
|
</style>
|
