最近项目打算重构,项目的模块几乎都是以后台查询展示的传统的增删改差模式,所以卑微的我想要自己封装一下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显示的,
卑微前端,记录自己的项目封装的组件,方便以后自己用,如果有哪里不合理,请各路大神多多指教。