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>
|