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

Vue3中可以通过组合API和自定义组件等方式实现灵活的TabBar底部导航栏组件，以下是一个简单的实现示例：

1. 首先定义一个TabBarItem组件，用于渲染每个底部导航栏项的内容，包括图标和文本等。

<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: ['change'],
  methods: {
    handleClick() {
      this.$emit('change');
    }
  }
};
</script>

2. 然后定义一个TabBar组件，用于渲染整个底部导航栏，同时管理和切换每个TabBarItem的状态。

<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 './TabBarItem.vue';

export default {
  components: {
    TabBarItem
  },
  props: {
    tabs: {
      type: Array,
      required: true
    },
    defaultIndex: {
      type: Number,
      default: 0
    }
  },
  emits: ['change'],
  data() {
    return {
      activeIndex: this.defaultIndex
    };
  },
  methods: {
    handleChange(index) {
      if (index !== this.activeIndex) {
        this.activeIndex = index;
        this.$emit('change', index);
      }
    }
  }
};
</script>

3. 最后在父组件中使用TabBar组件，传入需要显示的底部导航栏项和对应的内容组件，实现灵活的底部导航栏功能。

<template>
  <div class="app">
    <router-view />
    <tab-bar :tabs="tabs" @change="handleChange" />
  </div>
</template>

<script>
import TabBar from './TabBar.vue';
import Home from './Home.vue';
import About from './About.vue';

export default {
  components: {
    TabBar,
    Home,
    About
  },
  data() {
    return {
      tabs: [
        {
          icon: 'home',
          text: 'Home',
          component: Home
        },
        {
          icon: 'about',
          text: 'About',
          component: About
        }
      ],
      activeComponent: null
    };
  },
  methods: {
    handleChange(index) {
      this.activeComponent = this.tabs[index].component;
    }
  }
};
</script>

在以上代码中，父组件通过监听TabBar组件的change事件，动态切换显示对应的内容组件，实现了灵活的底部导航栏功能。