Vue使用插槽封装tabbar 和使用router-view

tabbar的封装思路tabbar

1、定义tabbar 组件
2、定义tabbar-item组件

定义tabbar 组件

思路：使用插槽

<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>

定义tabbar-item组件

思路：每个item项目 是一个tabbar中的一个子项，开发人员可动态定义。

<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>

使用

摘抄网上的例子：

<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>

router-view的使用

由于tabbar 的特点，我们点击tabbar后不会跳转到新的页面，而是会嵌入一个路由界面。为了实现这样的效果，我们通常通过两种方式来实现，一种是嵌入子组件的形式。还有一种是通过router-view 组件路由占位的方式实现。比如刚刚的例子，通过在tabbar上方加入router-view，即便是通过item组件路由的方式跳转到 各个tabbar-item的页面，也不会打开新的页面。

可以参考学习的文章：
https://blog.csdn.net/luoyu6/article/details/80098145