vue+element-ui的后台项目封装组件--面包屑的封装

最近项目打算重构，项目的模块几乎都是以后台查询展示的传统的增删改差模式，所以卑微的我想要自己封装一下tab，

子组件--可以添加icon的。

 1 <template>
 2   <div id="bread">
 3     <div class="bread-title">
 4       <div
 5         v-for="(item, index) in breadlist"
 6         :key="index"
 7         class="bread-curry"
 8         @click="tab(index)"
 9         :class="[index == active ? 'active' : '']"
10       >
11         <span class="icon  bread-icon"></span>
12         <span v-if="item.path" :to="{ path: '/' + item.path }">{{
13           item.title
14         }}</span>
15         <span v-else>{{ item.title }}</span>
16       </div>
17     </div>
18   </div>
19 </template>
20 <script>
21 export default {
22   props: {
23     breadlist: {
24       type: Array
25     },
26     title: {
27       type: String
28     },
29     icon: {
30       type: String
31     },
32     path: {
33       type: String
34     },
35     active: {
36       type: Number
37     }
38   },
39   data() {
40     return {};
41   },
42   methods: {
43     tab(index) {
44       this.$emit("tab", index);
45     }
46   }
47 };
48 </script>
49 <style lang="less" scoped>
50 // .bread-title {
51 //   height: 42px;
52 //   line-height: 42px;
53 // }
54 .bread-curry {
55   display: inline-block;
56   line-height: 42px;
57   cursor: pointer;
58   padding: 0 20px;
59   color: #666666;
60   font-size: 16px;
61   font-weight: bold;
62   line-height: 40px;
63   border-radius: 3px 3px 0 0;
64 }
65 .bread-icon {
66   width: 21px;
67   height: 23px;
68   margin-right: 5px;
69   vertical-align: middle;
70 }
71 .active {
72   color: #1a68b5;
73   cursor: default;
74   background-color: #e3edf7;
75   border-bottom-color: transparent;
76 }
77 </style>

子组件创建完之后在父组件里面引入

 1   <flight-bread
 2       :breadlist="breadlist"
 3       :active="active"
 4       @tab="tab"
 5     ></flight-bread>
 6 <script>
 7 import flightBread from "@/components/flightBread.vue";
 8 export default{
 9 components: {
10     flightBread,
11   
12   },
13     data() {
14         return {
15           breadlist: [
16             { title: "查询费率", path: "", id: 1 },
17             { title: "费率设置", path: "", id: 2 },
18             { title: "铺货特货码设置", path: "", id: 3 }
19           ],
20           active: 0,
21         }
22     },
23      methods: {
24          tab(childData) {
25           this.active = childData;
26     },
27     }
28 }
29 </script>

封装的这个tab面包屑只是在同一个页面控制显示隐藏，如果要跳转到其他页面的话，只需要在父组件传值那里添加path 的路径就可以，如果不跳转到其他的页面的话，path建议不设置这个字段，因为这个字段是控制子组件里面的to显示的，

卑微前端，记录自己的项目封装的组件，方便以后自己用，如果有哪里不合理，请各路大神多多指教。