55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<template>
|
||
<div class="page-breadcrumb">
|
||
<span>当前所在位置：</span>
|
||
<ul>
|
||
<li v-for="(item,index) in data" :key="item.uid">
|
||
<nuxt-link v-if="item.uri != null && item.uri !== ''" :to="item.uri">
|
||
{{ item.title }}
|
||
</nuxt-link>
|
||
<span v-else>{{ item.title }}</span>
|
||
<el-icon v-if="index < data.length - 1"><ArrowRight /></el-icon>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { ArrowRight } from '@element-plus/icons-vue'
|
||
export default {
|
||
name: 'PageBreadCrumb',
|
||
components: { ArrowRight },
|
||
props: {
|
||
data: {
|
||
required: true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.page-breadcrumb {
|
||
background-color: #fff;
|
||
height: 50px;
|
||
line-height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid var(--border-color);
|
||
color: var(--color-gray);
|
||
ul {
|
||
display: flex;
|
||
align-items: center;
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
color: var(--font-color);
|
||
a {
|
||
color: var(--primary-color);
|
||
}
|
||
.el-icon {
|
||
margin: 0 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|