<template>
|
<el-breadcrumb class="el-ext-breadcrumb" v-bind="$attrs">
|
<el-breadcrumb-item v-for="(item, index) in levelList" :key="index">
|
<span v-if="index == levelList.length - 1">{{ item.title }}</span>
|
<a v-else @click.prevent="handleLink(item)">{{ item.title }}</a>
|
</el-breadcrumb-item>
|
</el-breadcrumb>
|
</template>
|
|
<script>
|
const { compile } = require('path-to-regexp')
|
|
export default {
|
name: 'ElExtBreadcrumb',
|
props: {
|
menus: {
|
type: Array,
|
default: () => [],
|
},
|
},
|
data() {
|
return {
|
levelList: [],
|
}
|
},
|
watch: {
|
$route() {
|
this.getBreadcrumb()
|
},
|
},
|
mounted() {
|
this.getBreadcrumb()
|
},
|
methods: {
|
getBreadcrumb() {
|
const timer = setTimeout(() => {
|
const levelList = []
|
const { params } = this.$route
|
this.$route.matched.forEach((route) => {
|
if (
|
route.instances.default &&
|
route.instances.default.$metaInfo &&
|
route.instances.default.$metaInfo.title
|
) {
|
const toPath = compile(route.path)
|
levelList.push({
|
title: route.instances.default.$metaInfo.title,
|
path: toPath(params),
|
})
|
}
|
})
|
this.levelList = levelList
|
clearTimeout(timer)
|
}, 100)
|
},
|
handleLink(item) {
|
const mPath = item.path
|
const firstChild = this.findFirstChild(mPath, this.menus)
|
this.$router.push(firstChild)
|
},
|
findFirstChild(mPath, routes) {
|
let firstChild = mPath
|
if (!routes) {
|
return firstChild
|
}
|
for (const route of routes) {
|
if (route.fullPath === mPath) {
|
if (route.children && route.children.length > 0) {
|
return this.getLeafChild(route.children)
|
} else {
|
return mPath
|
}
|
} else if (route.children && route.children.length > 0) {
|
firstChild = this.findFirstChild(mPath, route.children)
|
}
|
}
|
return firstChild
|
},
|
getLeafChild(array) {
|
const first = array[0]
|
if (first.children && first.children.length > 0) {
|
return this.getLeafChild(first.children)
|
} else {
|
return first.fullPath
|
}
|
},
|
},
|
}
|
</script>
|
|
<style scoped lang="scss"></style>
|
