vue中面包屑的简易封装

在vue+element-ui基础上

面包屑的简易封装
在src/components/Breadcrumb/index.vue中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
	<div class="BreadcrumbBox">
		<span class="greenBorder"></span>
		<el-breadcrumb class="breadcrumb" separator="/">
			<el-breadcrumb-item v-for='(item,index) in Breadcrumb' :key="index" :to="item.path">{{item.name}}</el-breadcrumb-item>
		</el-breadcrumb>
	</div>
</template>
<script>
export default {
	props:["Breadcrumb"]
}
</script>
<style lang="scss" scoped>
.BreadcrumbBox{
	display: flex;
	padding-bottom: 10px;
	.greenBorder{
		border-left: 6px solid #3ba39a;
		margin-right: 10px;
	}
	.el-breadcrumb{
		line-height: 1.2
	}
}
</style>

在src/views/Myceshi/ceshi.vue中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
   <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
</template>
<script>
 import Breadcrumb from "@/components/Breadcrumb/index.vue";
 export default {
     components:{
        Breadcrumb,
     },
     data(){
        return {
            Breadcrumb:[{name:'采购管理',path:'tocaigou'},{name:'采购标准管理'},{name:'物料主数据'},{name:'我的申请单'},{name:'物资分类数据'}],
        }
     }
 }
</script>
<style>
</style>