vue3封装一个tabs组件

在 Vue 3 中封装一个 tabs 组件，你需要做如下几件事：

1. 创建一个 Vue 3 组件：

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Tabs',
  // ...
});

2. 为组件定义 props，用于接收外部传入的数据：

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'Tabs',
  props: {
    // 传入的标签页数据
    tabs: {
      type: Array as PropType<{ label: string; content: string }[]>,
      required: true,
    },
    // 当前选中的标签页索引
    activeIndex: {
      type: Number,
      default: 0,
    },
  },
  // ...
});

3. 在组件的 template 中定义 DOM 结构，显示标签页。你可以使用 v-for 指令来循环渲染标签页。

<template>
  <div>
    <!-- 标签页标签 -->
    <div class="tabs-labels">
      <template v-for="(tab, index) in tabs">
        <div
          :class="{ 'tab-label': true, active: index === activeIndex }"
          @click="activeIndex = index"
        >
          {{ tab.label }}
        </div>
      </template>
    </div>
    <!-- 标签页内容 -->
    <div class="tabs-contents">
      <template v-for="(tab, index) in tabs">
        <div v-if="index === activeIndex">{{ tab.content }}</div>
      </template>
    </div>
  </div>
</template>

4. 在组件的 script 中，可以使用 computed 属性来计算当前选中的标签页的内容。

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Tabs',
  props: {
    // ...
  },
  computed: {
    activeTab() {
      return this.tabs[this.activeIndex];
    },
  },
  // ...
});

5. 在组件的 script 中，可以