Vue封装TabBar组件

Vue环境准备

1、npm install vue-router 因为后面用得到路由
2、阿里矢量库，用于TabBar的图标

组件抽离为两个

1、TabBar.vue

<template>
    <div id="tab-bar">
      <slot></slot> //插槽：插入多个TabBarItem
    </div>
</template>

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

<style scoped>
   #tab-bar{
     display: flex;
     background-color: #f6f6f6;
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     box-shadow: 0 -1px 1px rgba(100, 100, 100, .2);
   }
</style>

2、TabBarItem

<template>
  <div class="tab-bar-item" @click="itemClick">
      <div v-if="!isActive"><slot name="item-icon"></slot></div>
      <div v-else><slot name="item-icon-active"></slot></div>
      <!--绑定class属性方式-->
      <!-- <div :class="{active: isActive}"><slot name="item-text"></slot></div> -->
      <!--绑定style属性的方式+计算属性-->
      <div :style="activeStyle"><slot name="item-text"></slot></div>
  </div>
</template>

<script>
export default {
    name: "TabBarItem",
    props: {
      // 接受点击TabBarItem跳转时的路径
      path: String,
      // 接受父组件传来的自定义“激活颜色”
      activeColor: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        // isActive: true
      }
    },
    computed: {
      // 是否点击的是当前TabBarItem
      isActive(){
        return this.$route.path.indexOf(this.path) != -1;
      },
      // 如果点击的是当前TabBarItem，则显示激活样式
      activeStyle(){
        return this.isActive ? {color: this.activeColor} : {}
      }
    },
    methods:{
      itemClick(){
        // 点击tarbitem跳转，跳转路径为“this.path”，不返回
        this.$router.replace(this.path)
      }
    }
}

</script>
<style scoped>
    .tab-bar-item{
      flex: 1;
      text-align: center;
      height: 49px;
      font-size: 14px;
    }
    .tab-bar-item img{
      width: 24px;
      height: 24px;
      margin-top: 1px;
      margin-bottom: 2px;
    }
    /* .active{
      color: #d4237a;
    } */
</style>

3、App.vue 应用上面封装的TabBar

<template>
  <div id="app">
    <router-view></router-view>
    <tab-bar>
      <tab-bar-item path="/home" activeColor="#d4237a">
        <!--这里的：~assets 等同于 src/assets -->
        <img slot="item-icon" src="~assets/img/tabbar/home.png" alt="">
        <img slot="item-icon-active" src="~assets/img/tabbar/home_active.png" alt="">
        <div slot="item-text">首页</div>
      </tab-bar-item>
      <tab-bar-item path="/category" activeColor="#d4237a">
        <img slot="item-icon" src="~assets/img/tabbar/category.png" alt="">
        <img slot="item-icon-active" src="~assets/img/tabbar/category_active.png" alt="">
        <div slot="item-text">分类</div>
      </tab-bar-item>
      <tab-bar-item path="/cart" activeColor="#d4237a">
        <img slot="item-icon" src="~assets/img/tabbar/buy.png" alt="">
        <img slot="item-icon-active" src="~assets/img/tabbar/buy_active.png" alt="">
        <div slot="item-text">购物车</div>
      </tab-bar-item>
      <tab-bar-item path="/profile" activeColor="#d4237a">
        <img slot="item-icon" src="~assets/img/tabbar/profile.png" alt="">
        <img slot="item-icon-active" src="~assets/img/tabbar/profile_active.png" alt="">
        <div slot="item-text">我的</div>
      </tab-bar-item>
    </tab-bar>
  </div>
</template>

<script scoped>
  import TabBar from './components/tabbar/TabBar'
  import TabBarItem from './components/tabbar/TabBarItem'

  export default {
    name: 'App',
    components: {
        TabBar,
        TabBarItem
    }
}
</script>

<style scoped>
</style>

4、vue-router 路由跳转 index.js配置

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () => import('../views/home/Home.vue')
const Category = () => import('../views/category/Category.vue')
const Cart = () => import('../views/cart/Cart.vue')
const Profile = () => import('../views/profile/Profile.vue')

//安装插件
Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/category',
        component: Category
    },
    {
        path: '/cart',
        component: Cart
    },
    {
        path: '/profile',
        component: Profile
    }
]

const router = new VueRouter({
    routes,
    mode: 'history'
})
// 导出router
export default router

效果展示