初心
9a5a22c11a
Some checks failed
Deploy to GitHub Pages / Deploy to GitHub Pages (push) Has been cancelled
62 lines
1.2 KiB
Vue
62 lines
1.2 KiB
Vue
<template>
|
|
<el-breadcrumb class="breadcrumb-container hidden-sm-and-down" separator=">">
|
|
<el-breadcrumb-item v-for="item in list" :key="item.path">
|
|
{{ item.meta.title }}
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'VabBreadcrumb',
|
|
data() {
|
|
return {
|
|
list: this.getBreadcrumb(),
|
|
}
|
|
},
|
|
watch: {
|
|
$route() {
|
|
this.list = this.getBreadcrumb()
|
|
},
|
|
},
|
|
methods: {
|
|
getBreadcrumb() {
|
|
return this.$route.matched.filter((item) => item.name && item.meta.title)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.breadcrumb-container {
|
|
height: $base-nav-bar-height;
|
|
font-size: $base-font-size-default;
|
|
line-height: $base-nav-bar-height;
|
|
|
|
::v-deep {
|
|
.el-breadcrumb__item {
|
|
.el-breadcrumb__inner {
|
|
a {
|
|
display: flex;
|
|
float: left;
|
|
font-weight: normal;
|
|
color: #515a6e;
|
|
|
|
i {
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
.el-breadcrumb__inner {
|
|
a {
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|