vue elementUI面包屑组件封装
麦兜:) 人气:0一.选择用哪种样式
二.在组件文件夹下创建组件
三.在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' } ] // 面包屑数据 } } }
效果如图:
加载全部内容