<template>
? <div id="app">
? ? <router-view />
? ? //引入子組件 把items 這個數(shù)組傳進去
? ? <Tabr :items="items" />
? </div>
</template>

<script>
import Tabr from "./components/Tabr";
export default {
? components: {
? ? Tabr,
? },
? data() {
? ? return {
? ? ? items: [
? ? ? ? {
? ? ? ? ? title: "首頁",
? ? ? ? ? path: "/",
? ? ? ? ? img: require("./assets/img/shouye.png"),
? ? ? ? ? imgs: require("./assets/img/shouye_1.png"),
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: "分類",
? ? ? ? ? path: "/About",
? ? ? ? ? img: require("./assets/img/fenlei.png"),
? ? ? ? ? imgs: require("./assets/img/fenlei_1.png"),
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: "購物車",
? ? ? ? ? path: "/Cart",
? ? ? ? ? img: require("./assets/img/gouwuchezhengpin.png"),
? ? ? ? ? imgs: require("./assets/img/gouwuchezhengpin_1.png"),
? ? ? ? },
? ? ? ? {
? ? ? ? ? title: "我的",
? ? ? ? ? path: "/Mime",
? ? ? ? ? img: require("./assets/img/wode.png"),
? ? ? ? ? imgs: require("./assets/img/wode_1.png"),
? ? ? ? },
? ? ? ],
? ? };
? },
};
</script>

<template>
? <div class="Yanxuan_tab">
? ? <div v-for="(item,index) in items" :key="index" @click="Onclick(index)">
? ? ? <div>
? ? ? ? <img :src="index===Tabindex?item.imgs:item.img" alt ?/>
? ? ? ? //動態(tài)綁定
? ? ? </div>
? ? ? <div :class="index===Tabindex?'title':'Yanxuan_title'">
? ? ? //
? ? ? {{item.title}}</div>
? ? </div>
? </div>
</template>

<script>
export default {
? props: {
? ? items: {
? ? ? type: Array,
? ? ? required: true,
? ? ? validator: function (value) {
? ? ? ? return value.length <= 6;
? ? ? ? //市面常見的Tabbar的欄 不能超過6個
? ? ? },
? ? }
? },
? data() {
? ? ? return {
? ? ? ? ? item:this.items,
? ? ? ? ? Tabindex:0
? ? ? }
? },
? methods:{
? ? ?Onclick(index){
? ? ?//這里是根據(jù)下標(biāo)切換 圖片樣式跟字體顏色 動態(tài)綁定
? ? ? ?this.Tabindex = index
? ? ? ?var temp = this.item[index]
? ? ? this.$router.push(temp.path)
? ? ?}
? }
};
</script>

<style scoped>
.Yanxuan_tab {
? width: 100%;
? height: 64px;
? border: 1px solid gainsboro;
? position: fixed;
? bottom: 0px;
? left: 0px;
? display: inline-flex;
? justify-content: space-around;
? align-items: center;
? text-align: center;
?
}
.Yanxuan_title{
? ? ?font-size: 14px;
}
.title{
? ? font-size: 14px;
? ? color:red
}
</style>

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{
      isShowTabbar:true
    }
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    meta:{
      isShowTabbar:true
    }
  }
  ,
  {
    path: '/Cart',
    name: 'Cart',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Cart.vue'),
    meta:{
      isShowTabbar:false
    }
  },
  {
    path: '/Mime',
    name: 'Mime',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Mime.vue'),
    meta:{
      isShowTabbar:true
    }
  },
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

<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>
?
<!--
? ? 上方代碼設(shè)置三個插槽，為什么不是兩個呢，因為還要包含當(dāng)item處于活躍狀態(tài)時要顯示的image，所以是三個，使用v-if控制當(dāng)非活躍時顯示默認icon插槽，活躍時顯示亮色icon插槽。因為插槽是要被傳入其中的內(nèi)容覆蓋的，所以傳入的內(nèi)容可能會將我們slot中的一些屬性覆蓋掉，所以常常我們需要將slot包裹在div中，這樣就可以避免這個問題。
? ? icon下方文同理也放在div中，style綁定一個計算屬性，看下方代碼可以這個計算屬性當(dāng)item處于活躍時會返回顏色屬性，當(dāng)然這個屬性也是可以在調(diào)用tab-bar時傳入的，默認為紅色。
-->

<script>
? export default {
? ? name:'TabBarItem',
? ? props:{
? ? ? path: String, ?// 當(dāng)前item對應(yīng)的路由，由調(diào)用者指定
? ? ? activeColor:{ ?// 當(dāng)前item的文字在活躍時的顏色，默認紅色，可由使用者指定
? ? ? ? type:String,
? ? ? ? default:"red"
? ? ? }
? ? },
? ? data() {
? ? ? return {
? ? ? ? // isActive:false,
? ? ? }
? ? },
? ? computed:{
? ? ? // 判斷當(dāng)前item是否處于活躍狀態(tài)
? ? ? isActive(){
? ? ? ? return this.$route.path.indexOf(this.path)!==-1;
? ? ? },
? ? ? // 計算屬性,如果處于活躍狀態(tài)則設(shè)置style，否則去除style
? ? ? activeStyle(){
? ? ? ? return this.isActive? {color:this.activeColor}:{};
? ? ? }
? ? },
? ? methods:{
? ? ? itemClick(){
? ? ? ? if(this.$route.path!==this.path){
? ? ? ? ? this.$router.push(this.path);
? ? ? ? ? // this.isActive = true;
? ? ? ? }?
? ? ? }
? ? }
? }
</script>

<style scoped>
<!--一些默認樣式-->
? .tab-bar-item {
? ? flex: 1;
? ? text-align: center;
? ? height: 49px;
? ? font-size: 10px;
? }
? .tab-bar-item img {
? ? margin-top: 4px;
? ? width: 22px;
? ? height: 22px;
? ? vertical-align: middle;
? ? margin-bottom: 2px;
? }
</style>

<template>
? <div id="tab-bar">
? ? <slot></slot>
? </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: 0px -2px 1px rgba(100, 100, 100, 0.1);
}
?
</style>

<template>
? <tab-bar>
? ? ? <tab-bar-item path="/home" activeColor="deepPink">
? ? ? ? <img slot="item-icon" src="~assets/img/tabbar/home.svg" alt="">
? ? ? ? <img slot="item-icon-active" src="~assets/img/tabbar/home_active.svg" alt="">
? ? ? ? <div slot="item-text">首頁</div>
? ? ? </tab-bar-item>
? ? ? <tab-bar-item path="/category" activeColor="deepPink">
? ? ? ? <img slot="item-icon" src="~assets/img/tabbar/category.svg" alt="">
? ? ? ? <img slot="item-icon-active" src="~assets/img/tabbar/category_active.svg" alt="">
? ? ? ? <div slot="item-text">分類</div>
? ? ? </tab-bar-item>
? ? ? <tab-bar-item path="/cart" activeColor="deepPink">
? ? ? ? <img slot="item-icon" src="~assets/img/tabbar/cart.svg" alt="">
? ? ? ? <img slot="item-icon-active" src="~assets/img/tabbar/cart_active.svg" alt="">
? ? ? ? <div slot="item-text">購物車</div>
? ? ? </tab-bar-item>
? ? ? <tab-bar-item path="/profile" activeColor="deepPink">
? ? ? ? <img slot="item-icon" src="~assets/img/tabbar/profile.svg" alt="">
? ? ? ? <img slot="item-icon-active" src="~assets/img/tabbar/profile_active.svg" alt="">
? ? ? ? <div slot="item-text">我的</div>
? ? ? </tab-bar-item>
? ? </tab-bar>
??
</template>

<script>
? import TabBar from "components/tabbar/TabBar";
? import TabBarItem from "components/tabbar/TabBarItem";
? export default {
? ? name:'MainTabBar',
? ? components:{
? ? ? TabBar,
? ? ? TabBarItem
? ? }
? }
</script>

<style scoped>
</style>