vuecli3+工具中,封装tabbar组件(底部导航栏)

本文档详细介绍了如何在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) !== -
Vue3中可以通过组合API和自定义组件等方式实现灵活的TabBar底部导航栏组件,以下是一个简单的实现示例: 1. 首先定义一个TabBarItem组件,用于渲染每个底部导航栏项的内容,包括图标和文本等。 ```javascript <template> <div class="tab-bar-item" :class="{ active: active }" @click="handleClick"> <span class="tab-bar-icon">{{ icon }}</span> <span class="tab-bar-text">{{ text }}</span> </div> </template> <script> export default { props: { icon: { type: String, required: true }, text: { type: String, required: true }, active: { type: Boolean, default: false } }, emits: [&#39;change&#39;], methods: { handleClick() { this.$emit(&#39;change&#39;); } } }; </script> ``` 2. 然后定义一个TabBar组件,用于渲染整个底部导航栏,同时管理和切换每个TabBarItem的状态。 ```javascript <template> <div class="tab-bar"> <tab-bar-item v-for="(item, index) in tabs" :key="index" :icon="item.icon" :text="item.text" :active="index === activeIndex" @change="handleChange(index)" /> </div> </template> <script> import TabBarItem from &#39;./TabBarItem.vue&#39;; export default { components: { TabBarItem }, props: { tabs: { type: Array, required: true }, defaultIndex: { type: Number, default: 0 } }, emits: [&#39;change&#39;], data() { return { activeIndex: this.defaultIndex }; }, methods: { handleChange(index) { if (index !== this.activeIndex) { this.activeIndex = index; this.$emit(&#39;change&#39;, index); } } } }; </script> ``` 3. 最后在父组件中使用TabBar组件,传入需要显示的底部导航栏项和对应的内容组件,实现灵活的底部导航栏功能。 ```javascript <template> <div class="app"> <router-view /> <tab-bar :tabs="tabs" @change="handleChange" /> </div> </template> <script> import TabBar from &#39;./TabBar.vue&#39;; import Home from &#39;./Home.vue&#39;; import About from &#39;./About.vue&#39;; export default { components: { TabBar, Home, About }, data() { return { tabs: [ { icon: &#39;home&#39;, text: &#39;Home&#39;, component: Home }, { icon: &#39;about&#39;, text: &#39;About&#39;, component: About } ], activeComponent: null }; }, methods: { handleChange(index) { this.activeComponent = this.tabs[index].component; } } }; </script> ``` 在以上代码中,父组件通过监听TabBar组件的change事件,动态切换显示对应的内容组件,实现了灵活的底部导航栏功能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值