vuecli3+工具中，封装tabbar组件（底部导航栏）

原创

于 2019-11-20 17:11:08 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

本文档详细介绍了如何在VueCLI3环境下，通过四个步骤封装一个可复用的TabBar组件，包括TabBar和TabBarItem组件的封装、传入active图片、结合路由以及动态控制颜色。主要涉及组件开发、路由管理和状态控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图，封装tabbar组件（其他项目中可复用）
在这里插入图片描述
开发过程：
1、TabBar 和 TabBarItem 组件封装
2、给TabBarItem传入active图片
3、TabBarItem 和路由（router）结合
4、TabBarItem的颜色动态控制

TabBarItem.vue页面：

<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) !== -