vue项目实现自定义tabBar组件的封装

首先感谢王红元老师的vue课程，从中受益良多。特别是在目录结构的划分、组件封装思想上受到了很大启发，下面为大家带来一个tabBar的组件封装。

一、创建一个存放公共组件的文件夹，里面再新建一个tabbar的文件夹。里面创建两个.vue文件：TabBar.vue和TabBarItem.vue 如图：

1、TabBar.vue代码展示：

<template>
  <div class="tab-bar">
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: "TabBar"
  }
</script>
<style scoped>
  .tab-bar{
    width:100%;
    height: 49px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 500;
    display: flex;
    justify-content: space-around;
    background-color: white;
    border-top: 1px solid #f3f3f3
  }
</style>

2、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(){ //激活当前路由对应的tab项样式
        return this.$route.path.indexOf(this.path) != -1
      },
      activeStyle(){
        return this.isActive?{color:this.activeColor}:{}
      }
    },
    props:{
      path:{
        type:String,
        default:'/'
      },
      activeColor: {
        type:String,
        default: '#f96702'
      },
      defaultColor:{
        type: String,
        default: '#666'
      }
    },
    methods:{
      itemBind(){ //点击tabBar项跳转对应的路由
        if(!this.isActive){
          this.$router.replace(this.path)
        }
      }
    }
  }
</script>
<style scoped>
  .tab-bar-item{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 13px
  }
  .tab-bar-item img{
    display: block;
    width: 25px;
    height: 25px;
    margin-bottom: 2px;
  }
</style>

二、创建一个MainTabBar.vue文件，用于导入上述组件，以及配置tabBar相关参数。代码展示：

<template>
  <tab-bar v-if="isShowTabbar">
    <tab-bar-item
      v-for="item in tabBarArr"
      :path="item.path"
      :activeColor="activeColor"
      :defaultColor="defaultColor"
    >
      <template v-slot:item-icon>
        <img :src="item.defaultIcon">
      </template>
      <template v-slot:item-icon-active>
        <img :src="item.activeIcon">
      </template>
      <template v-slot:item-text>
        <div>{{item.name}}</div>
      </template>
    </tab-bar-item>
  </tab-bar>
</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:'#008cd6', //选中色
        defaultColor:'#8a8a8a', //默认色
        tabBarArr:[
          {
            path:'/storelist',
            name:'加油闪付',
            defaultIcon:require('assets/img/tabbar/flashPay.png'),
            activeIcon:require('assets/img/tabbar/flashPayChoosed.png')
          },
          {
            path:'/equity',
            name:'车主权益',
            defaultIcon:require('assets/img/tabbar/equity.png'),
            activeIcon:require('assets/img/tabbar/equityChoosed.png')
          },
          {
            path:'/gasstation',
            name:'油站导航',
            defaultIcon:require('assets/img/tabbar/navigation.png'),
            activeIcon:require('assets/img/tabbar/navigationChoosed.png')
          },
          {
            path:'/profile',
            name:'个人中心',
            defaultIcon:require('assets/img/tabbar/customerCenter.png'),
            activeIcon:require('assets/img/tabbar/customerCenterChoosed.png')
          }
        ]
      }
    },
    computed:{
      // 控制非tab页隐藏tab导航
      isShowTabbar(){
        return this.tabBarArr.map(val=>{return val['path']}).includes(this.$route.path)
      }
    }
  }
</script>

三、导入组件
在App.vue文件中导入MainTabBar.vue组件;
然后调用即可;
至此tabBar的底部导航组件封装完成;

达到的功能：可配置默认色、激活色、图标、路由。