You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.2 KiB
64 lines
1.2 KiB
<template> |
|
<!-- 面包屑 --> |
|
<div class="breadcrumb"> |
|
<el-breadcrumb separator=">"> |
|
<template v-for="(item, index) in pages"> |
|
<el-breadcrumb-item |
|
v-if="index != pages.length - 1" |
|
:key="index" |
|
:to="{ path: route, query }"> |
|
{{item}} |
|
</el-breadcrumb-item> |
|
<el-breadcrumb-item |
|
v-else |
|
:key="index"> |
|
{{item}} |
|
</el-breadcrumb-item> |
|
</template> |
|
</el-breadcrumb> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
props: { |
|
data: { |
|
type: String, |
|
required: true |
|
}, |
|
route: { |
|
type: String, |
|
default: 'list' |
|
}, |
|
query: { |
|
type: Object |
|
} |
|
}, |
|
data() { |
|
return { |
|
pages: this.data.split('/') |
|
}; |
|
}, |
|
methods: { |
|
update(data){ |
|
this.pages = data.split('/') |
|
} |
|
} |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.breadcrumb { |
|
margin: 4px 0 16px; |
|
/deep/.el-breadcrumb__item { |
|
.is-link, .el-breadcrumb__separator { |
|
font-weight: 400; |
|
color: #007EFF; |
|
} |
|
&:last-child { |
|
.is-link { |
|
color: #0B1D30; |
|
} |
|
} |
|
} |
|
} |
|
</style> |