vue2封装tabbar组件

使用vue2封装一个tabbar组件：

所用知识：组件插槽slot，具名插槽，父组件向子组件传递数据，计算属性，路由懒加载，$route.path获取当前路径

目录结构：

实现代码

 App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <tab-bar>
      <tab-bar-item path='/home' activeColor='blue'>
        <img slot='item-icon' src="./assets/img/tabbar/index.png" alt="">
        <img slot='item-icon-active' src="./assets/img/tabbar/indexed.png" alt="">
        <div slot='item-text'>首页</div>
      </tab-bar-item>
      <tab-bar-item path='/category'  activeColor='blue'>
        <img slot='item-icon' src="./assets/img/tabbar/category.png" alt="">
        <img slot='item-icon-active' src="./assets/img/tabbar/categoryed.png" alt="">
        <div slot='item-text'>分类</div>
      </tab-bar-item>
      <tab-bar-item path='/cart' activeColor='blue'>
        <img slot='item-icon' src="./assets/img/tabbar/cart.png" alt="">
        <img slot='item-icon-active' src="./assets/img/tabbar/carted.png" alt="">
        <div slot='item-text'>购物车</div>
      </tab-bar-item>
      <tab-bar-item path='/my' activeColor='blue'>
        <img slot='item-icon' src="./assets/img/tabbar/my.png" alt="">
        <img slot='item-icon-active' src="./assets/img/tabbar/myed.png" alt="">
        <div slot='item-text'>我的</div>
      </tab-bar-item>
    </tab-bar>
  </div>
</template>

<script>
import TabBar from './components/tabbar/TabBar.vue'
import TabBarItem from './components/tabbar/TabBarItem.vue'
export default {
  name: 'App',
  components:{
    TabBar,
    TabBarItem
  }
}
</script>

<style>
  @import './assets/css/base.css';
 
</style>

TabBar.vue

<template>
  <div>
      <div id="tabbar">
        <slot></slot>
      </div>
  </div>
</template>

<script>
export default {
    name:'TabBar'
}
</script>

<style>
 #tabbar{
    display: flex;
    background-color:#f6f6f6;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    box-shadow:0 -1px 5px rgba(100,100,100,0.2)
  }
  
</style>

TabBarItem.vue

<template>
    <div class="tabbar-item" @click='itemClick'>
        <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',
    props:{
        path:String,
        activeColor:{
            type:String,
            default:'red'
        }
    },
    data(){
        return {
            // isActive:true

        }
    },
    computed:{
        isActive(){
            return this.$route.path.indexOf(this.path)
        },
        activeStyle(){
            return !this.isActive ? {color:this.activeColor}:{}
        }
    }
    ,methods:{
        itemClick(){
            // console.log(111)
            this.$router.push(this.path)
        }
    }
}
</script>

<style>
.tabbar-item{
    flex:1;
    text-align: center;
    height:49px;
font-size: 12px;
  }
  .tabbar-item img{
    width: 32px;
    height: 32px;
    /* margin-top: 0px; */
    vertical-align: middle;
    margin-bottom: -2px;
  }

</style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
const Home = () =>
    import ('../pages/home/Home')
const Category = () =>
    import ('../pages/category/Category')
const Cart = () =>
    import ('../pages/cart/Cart')
const My = () =>
    import ('../pages/my/My')

Vue.use(Router)

export default new Router({
    routes: [{
        path: '/',
        redirect: '/home'
    }, {
        path: '/home',
        component: Home
    }, {
        path: '/category',
        component: Category
    }, {
        path: '/cart',
        component: Cart
    }, {
        path: '/my',
        component: My
    }]
})

实现效果：