vue+elementUI面包屑组件封装方法详解
时间：2023-02-10 10:13:01|栏目：vue|点击： 次
本文实例为大家分享了vue+elementUI面包屑组件封装的具体代码，供大家参考，具体内容如下
一.选择用哪种样式
二.在组件文件夹下创建组件
三.在Bread.vue复制如下代码
<template>
<!-- 面包屑 -->
<div class="bread">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="(item, index) in fromFather" :key=index :to="{ path: '/' + item.path }">{{item.name}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
name: 'bread',
props: ['fromFather']
}
</script>
<style lang="less">
.bread {
background-color: #fff;
width: 100%;
height: 50px;
padding: 0 16px;
border: 1px #EFEFEF solid;
box-sizing: border-box;
box-shadow: 1px 2px 4px #BABABA;
margin-bottom: 36px;
.el-icon-arrow-right:before {
color: #000;
}
.el-breadcrumb__item {
font-size: 20px;
line-height: 50px;
}
.el-breadcrumb__inner {
cursor: pointer !important;
}
}
</style>
四.在你需要的页面上应用
// html代码 <!-- 面包屑导航 --> <Bread :fromFather="dataPath"></Bread>
// js代码
import Bread from '../../../components/Bread.vue' // 引入面包屑组件
export default {
name: 'nicklist',
components: {
Bread // 注册面包屑组件
},
data() {
return {
dataPath: [
{
name: '课程', // 名称,自定
path: 'nicklist' // 路由导航,自定
},
{
name: '课程管理',
path: 'nicklist'
}
] // 面包屑数据
}
}
}
效果如图:
