vue tabBar导航栏设计实现5-最终版本

系列导航

一、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就是找到了