<script setup>实现 tab组件

好的，以下是一个简单的实现：

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

<script>
export default {
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    initialTab: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      activeTab: this.initialTab,
    };
  },
  methods: {
    selectTab(index) {
      this.activeTab = index;
    },
  },
};
</script>

<style>
.tab-header {
  display: flex;
}

.tab-item {
  cursor: pointer;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  margin-right: 8px;
}

.tab-item.active {
  background-color: #eee;
  border-bottom: 1px solid #eee;
}

.tab-content {
  border: 1px solid #ccc;
  border-top: none;
  padding: 16px;
  border-radius: 0 4px 4px 4px;
}
</style>

使用时，可以这样写：

<template>
  <div>
    <tab :tabs="tabs">
      <template #tab1>
        <h2>Tab 1 Content</h2>
        <p>This is the content for tab 1.</p>
      </template>
      <template #tab2>
        <h2>Tab 2 Content</h2>
        <p>This is the content for tab 2.</p>
      </template>
      <template #tab3>
        <h2>Tab 3 Content</h2>
        <p>This is the content for tab 3.</p>
      </template>
    </tab>
  </div>
</template>

<script>
import Tab from './Tab.vue';

export default {
  components: {
    Tab,
  },
  data() {
    return {
      tabs: [
        {
          name: 'tab1',
          label: 'Tab 1',
        },
        {
          name: 'tab2',
          label: 'Tab 2',
        },
        {
          name: 'tab3',
          label: 'Tab 3',
        },
      ],
    };
  },
};
</script>

这个组件可以接收一个 `tabs` 数组作为参数，每个选项卡需要包含一个 `name` 属性和一个 `label` 属性。`initialTab` 属性可以用来设置默认选中的选项卡。在组件内部，我们使用 `activeTab` 来表示当前选中的选项卡的索引。用户可以通过点击选项卡来切换选项卡的内容。选项卡的内容是通过插槽实现的，每个插槽的名称对应一个选项卡的 `name` 属性。