用vue对tabbar的封装

 

 

 

这是要做成写封装效果，

这个重点就是要学会router的用法，用router进行各个页面的跳转，（这里的跳转不是说真跳转了，而是url拼接了个路径。然后js代码读到这个路径，去做对应的页面展示）

这是文件路径，

 

首先我们来看看router里面的index.vue代码

import Vue from 'vue'
import VueRouter from 'vue-router'
//懒加载
const Home = () => import('../views/home/Home')
const Category = () => import('../views/category/Category')
const File = () => import('../views/file/File')
const Cart = () => import('../views/cart/Cart')
//安装插件ue
Vue.use(VueRouter)
//创建路由对象
const routes = [
    {
        path: '',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/category',
        component: Category
    },
    {
        path: '/file',
        component: File
    },
    {
        path: '/cart',
        component: Cart
    },
]
const router = new VueRouter({
    routes,
    mode: 'history'
})
//导出
export default router

这里采用的懒加载（将不同的路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件这样就更加高效了）

然后是Tabbar.vue这里面采用的预留插槽，这样使别人用起来更加的方便，可以添加不同的样式，

<template>
    <div class="tab-bar">
      <slot></slot>
    </div>
  </template>
  
  <script>
    export default {
      name: "TabBar"
    }
  </script>
  
  <style scoped>
    .tab-bar {
      background-color: #f6f6f6;
      height: 49px;
      border-top: 1px solid #eee;
      box-shadow: 0 -1px 1px rgba(150,150,150,.08);
  
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
  
      display: flex;
      text-align: center;
    }
  </style>
  

然后是TabBarItem.vue里面的代码

<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>
        <div :style='activeStyle'><slot name='item-text'></slot></div>
        
    </div> 
</template>

<script>
    export default {
        name: 'TabBarItem',
        props: {
            path:String,
            activeColor:{
                type:String,
                default:'hotpink'
            }
        },
        
        data() {
            return {
               
            }
        },
        computed:{
            isActive(){
               return  this.$route.path.indexOf(this.path)!== -1
            },
            activeStyle(){
                return this.isActive?{color:this.activeColor}:{}
            }
        },
        methods: {
            itemClick() {
                this.$router.push(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:3px;
        vertical-align: middle;
        margin-bottom: 2px;
    }
  
    </style>

依旧是插槽，然后颜色和路由地址是从外部组件传进来的