Vue3实现TabBar底部导航栏灵活组件

Vue3实现TabBar底部导航栏灵活组件的步骤如下：

1. 创建一个Vue组件，并定义需要的props属性，比如标签页列表、当前选中的标签页等。

2. 在组件中使用Vue3的Composition API，定义需要的状态和方法，比如当前选中的标签页索引、切换标签页的方法等。

3. 在组件的template中使用v-for指令渲染标签页列表，并使用v-bind指令动态绑定类名和样式。

4. 在组件中使用v-on指令绑定click事件，触发切换标签页的方法。

5. 在父组件中引用TabBar组件，并传入需要的props属性。

6. 在父组件中可以使用slot插槽，自定义每个标签页的内容。

7. 可以根据不同的需求，自定义TabBar组件的样式和动画效果。

示例代码如下：

<template>
  <div class="tab-bar">
    <div v-for="(item, index) in tabs" :key="index" 
         :class="{ 'tab': true, 'active': currentIndex === index }" 
         @click="switchTab(index)">
      {{ item.label }}
    </div>
  </div>
  <div class="tab-content">
    <slot :name="tabs[currentIndex].name"></slot>
  </div>
</template>

<script>
  import { ref } from 'vue';
  
  export default {
    name: 'TabBar',
    props: {
      tabs: {
        type: Array,
        required: true
      },
      defaultIndex: {
        type: Number,
        default: 0
      }
    },
    setup(props) {
      const currentIndex = ref(props.defaultIndex);
      
      const switchTab = (index) => {
        currentIndex.value = index;
      };
      
      return {
        currentIndex,
        switchTab
      };
    }
  };
</script>

<style>
  .tab-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
    border-top: 1px solid #ccc;
    background-color: #fff;
  }
  
  .tab {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100%;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }
  
  .active {
    color: #1890ff;
  }
  
  .tab-content {
    padding: 20px;
    background-color: #f5f5f5;
  }
</style>