vue+elementUI面包屑组件封装方法详解 vue+elementUI面包屑组件封装方法

本文实例为大家分享了vue+elementUI面包屑组件封装的具体代码，供大家参考，具体内容如下
一.选择用哪种样式
文章图片

二.在组件文件夹下创建组件
文章图片

三.在Bread.vue复制如下代码

.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; }}

四.在你需要的页面上应用

// html代码

// js代码import Bread from '../../../components/Bread.vue'// 引入面包屑组件export default {name: 'nicklist',components: {Bread // 注册面包屑组件},data() {return {dataPath: [{name: '课程',// 名称,自定path: 'nicklist'// 路由导航,自定},{name: '课程管理',path: 'nicklist'}] // 面包屑数据}}}

效果如图:
【vue+elementUI面包屑组件封装方法详解】