系列導航

一、vue tabBar導航欄設計實現1-初步設計

二、vue tabBar導航欄設計實現2-抽取tab-bar

三、vue tabBar導航欄設計實現3-進一步抽取tab-item

四、vue tabBar導航欄設計實現4-再次抽取MainTabBar

五、vue tabBar導航欄設計實現5-最終版本

tabBar導航欄設計5-最終版本

一、 本節目標效果

導航欄選中哪個哪個用紅色圖示，並且字型的顏色可以隨意設定（這裡為了醒目用藍色）

二、程式碼結構

注：主要是標紅的幾個檔案

三、程式碼

App.vue

<template>
	<div id="app">
		<main-tab-bar></main-tab-bar>
		<router-view></router-view>
	</div>
</template>


<script>
	import {
		defineComponent
	} from 'vue'
	import MainTabBar from './components/mainTabbar/MainTabBar'
	export default defineComponent({
		//元件名稱
		name: 'App',
		//接收父元件的資料
		props: {},
		components: {
			MainTabBar 
		},
		setup(props, ctx) {
			return {}
		}
	})
</script>

<style lang="scss">
	@import "./assets/css/base.css";
</style>

TabBar.vue

<template>
  <div id="tab-bar">
	  <slot></slot>
  </div>  
</template>

<script>
	
import {defineComponent} from 'vue'
 
export default defineComponent({
    //元件名稱
    name:'TabBar',
    //接收父元件的資料
    props:{
    },
	components: {
	  
	},
    setup(props,ctx){
        return{   
        }
    }    
})	
	
 
</script>

<style lang="scss">
  #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>

TabBarItem.vue

<template>
  <div class="tab-bar-item" @click="itemClick">
	<div v-if="isActive"><slot name="item-icon-active"></slot></div>
	<div v-else><slot name="item-icon"></slot></div>
	<div :style="activeStyle"><slot name="item-text"></slot></div>
  </div>
</template>

<script>
 import { createRouter, createWebHistory } from 'vue-router'
 import {defineComponent} from 'vue'
   
  export default defineComponent({
      //元件名稱
      name:'TabBarItem',
      //接收父元件的資料
      props:{
		  path: String,
		  activeColor: {
		    type: String,
		    default: 'red'
		  }
      },
  	components: {
  	  
  	},
	computed: {
	  isActive() {
		  //不等於-1就是找到了
	    return this.$route.path.indexOf(this.path) !== -1
	  },
	  activeStyle() {
	    return this.isActive ? {color: this.activeColor} : {}
	  }
	},
	methods: {
	  itemClick() {
	    this.$router.push(this.path)
	  }
	},
      setup(props,ctx){
          return{  
			   
          }
      }    
  })	
</script>

<style lang="scss">
  .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>

MainTabBar.vue

<template>
  <tab-bar>
  	<tab-bar-item  path="/home"  activeColor="blue">
  		<template v-slot:item-icon>
  			<img :src="require('../../assets/img/tabbar/home.svg')">
  		</template>
		<template v-slot:item-icon-active>
			<img :src="require('../../assets/img/tabbar/home_active.svg')">
		</template>
  		<template v-slot:item-text>
  			 <div slot="item-text">首頁</div>
  		</template>
  	</tab-bar-item>
  	<tab-bar-item path="/category" activeColor="blue">
  		<template v-slot:item-icon>
  			 <img :src="require('../../assets/img/tabbar/category.svg')">
  		</template>
		<template v-slot:item-icon-active>
			<img :src="require('../../assets/img/tabbar/category_active.svg')">
		</template>
  		<template v-slot:item-text>
  			 <div slot="item-text">分類</div>
  		</template>
  	</tab-bar-item>
  	<tab-bar-item path="/cart" activeColor="blue">
  		<template v-slot:item-icon>
  			<img :src="require('../../assets/img/tabbar/shopcart.svg')">
  		</template>
		<template v-slot:item-icon-active>
			<img :src="require('../../assets/img/tabbar/shopcart_active.svg')">
		</template>
  		<template v-slot:item-text>
  			<div slot="item-text">購物車</div>
  		</template>
  	</tab-bar-item>
  	<tab-bar-item path="/profile" activeColor="blue">
  		<template v-slot:item-icon>
  			<img :src="require('../../assets/img/tabbar/profile.svg')">
  		</template>
  		<template v-slot:item-icon-active>
  			<img :src="require('../../assets/img/tabbar/profile_active.svg')">
  		</template>
  		<template v-slot:item-text>
  			<div slot="item-text">我的</div>
  		</template>
  	</tab-bar-item>
  </tab-bar>
</template>

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

  export default {
    name: "MainTabBar",
    components: {
      TabBar,
      TabBarItem
    }
  }
</script>

<style scoped>

</style>

index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Category from '../views/Category.vue'
import Cart from '../views/Cart.vue'
import Profile from '../views/Profile.vue'

 

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

其他一些程式碼不很簡單看之前的部落格內容

四、程式碼按照步驟解釋

1、 抽取MainTabBar.vue元件

MainTabBar.vue元件裡<tab-bar-item>標籤上增加了activeColor="blue"這屬性，這裡的顏色可以根據需求隨意換。

2、 TabBarItem.vue元件裡增加isActive和activeStyle計算屬性用來控制，哪個按鈕選中就用紅色的圖示和字型顏色動態設定。

this.$route.path.indexOf(this.path) !== -1 //當前路徑是哪個判斷，不等於-1就是找到了