vue3 封装 tabs 和 tab-pane

Vue3 中封装 tabs（标签页组件）和 tab-pane（选项卡内容组件）是为了创建可复用且易于管理的导航系统。这是一个常见的用户界面元素，用于展示并切换不同的视图区域。

首先，你需要创建一个 `Tabs` 组件，它通常包含以下几个部分：

1. 一个数组或对象，存储每个 tab 的标题（label）和对应的组件实例（一般是一个懒加载的 <template> 或路由引用）。
2. 一个 `v-model` 变量，用于绑定当前激活的 tab，可以是数组索引或者对象属性。
3. 渲染方法（如 `<template>`），显示默认的 tab（通常是第一个），并提供切换功能，比如点击标签时更新 `v-model`。

<template>
  <div class="tabs">
    <ul>
      <li v-for="(tab, index) in tabs" :key="index" @click="setActiveTab(index)">
        {{ tab.label }}
      </li>
    </ul>
    <component v-if="activeTabComponent" :is="activeTabComponent"></component>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const tabs = ref([{ label: 'Tab 1', component: () => import('./Tab1.vue') }]);
const activeTabIndex = ref(0);
const setActiveTab = (index) => {
  activeTabIndex.value = index;
};
const activeTabComponent = computed(() => {
  return tabs.value[activeTabIndex.value].component;
});
</script>

<style scoped>
.tabs ul {
  display: flex;
}
.tabs > * {
  flex-grow: 1;
}
</style>

`TabPane` 组件则代表单个可切换的内容区域，你可以将其设置为动态渲染或静态内容，例如：

<!-- Tab1.vue -->
<template>
  <div class="tabpanel">
    <h2>{{ tab.label }}</h2>
    <!-- 内容区 -->
    这是 Tab 1 的内容...
  </div>
</template>