In daily development, we often use the TabBar navigation bar at the bottom. Optimization suggestions please leave a message!!

TabBar.vue

<template> <div class="tab-bar"> <slot></slot> </div> </template> <script> export default { name: "TabBar" } </script> <style scoped> .tab-bar { display: flex; background-color: #f6f6f6; Height: 49px box-shadow: 0-1px 1px rgba(100,100,100,.2); position: fixed; z-index: 500; bottom: 0; left: 0; right:0; } </style>Copy the code

TabBarItem.vue

<template> <div class="tab-bar-item" :style="{color: defaultColor}" @click="itemBind"> <div v-if="! isActive"><slot name="item-icon"></slot></div> <div v-else><slot name="item-icon-active"></slot></div> <div :style="activeStyle"><slot name="item-text"></slot></div> </div> </template> <script> export default { name: "TabBarItem", computed:{isActive(){// Activate TAB items corresponding to the current route return this.$route.path.indexof (this.path)! = -1 }, activeStyle(){ return this.isActive? {color:this.activeColor}:{} } }, props:{ path:String, activeColor: { type:String, default: '#f96702' }, defaultColor:{ type: String, default: '# 666'}}, Methods :{itemBind(){this.$router.replace(this.path)}} </script> <style scoped>. Tab-bar-item {flex: itemBind(){itemBind(){this.$router.replace(this.path)}} </script> <style scoped>. 1; text-align: center; font-size: 14px; } .tab-bar-item img { display: block; width: 24px; height: 24px; margin: 0 auto; margin-top: 3px; margin-bottom: 2px; vertical-align: middle; } </style>Copy the code

mainTabBar.vue

<template> <div> <tab-bar v-if="isShowTabbar"> <tab-bar-item :path="tabBarArr[index].path" :activeColor="activeColor" :defaultColor="defaultColor" v-for="(item,index) in tabBarArr" > <img :src="tabBarArr[index].defaultIcon" slot = 'item-icon'> <img :src="tabBarArr[index].activeIcon" slot = 'item-icon-active'> <div slot = 'item-text'>{{tabBarArr[index].name}}</div> </tab-bar-item> </tab-bar> </div> </template> <script> import TabBar from 'components/common/tabbar/TabBar' import TabBarItem from 'components/common/tabbar/TabBarItem' export default { name: "MainTabBar", components:{TabBar,TabBarItem}, data(){return{activeColor:'#f96702', // Select defaultColor:'#666', / / the default color tabBarArr: [{path: '/ home' name: 'front page' defaultIcon: the require (' assets/img/tabbar/index. The PNG '), ActiveIcon: the require (' assets/img/tabbar indexChoosed. PNG ')}, {path: '/ flashpay, name:' classification, defaultIcon:require('assets/img/tabbar/flashPay.png'), activeIcon:require('assets/img/tabbar/flashPayChoosed.png') }, {path: '/ navigation, name:' shopping cart ', defaultIcon: the require (' assets/img/tabbar/navigation. The PNG '), ActiveIcon: the require (' assets/img/tabbar navigationChoosed. PNG ')}, {path: '/ profile, name:' my ', defaultIcon:require('assets/img/tabbar/customerCenter.png'), activeIcon:require('assets/img/tabbar/customerCenterChoosed.png') } ] } }, Computed :{// Control non-tab pages to hide TAB navigation isShowTabbar(){return this.tabbararr.map ((val,key)=>{return val['path']}).includes(this.$route.path) } } } </script>Copy the code