帮我用vue封装一个选项卡组件

好的，这是一个使用 Vue 封装选项卡组件的示例代码：

<template>
  <div class="tabs">
    <ul class="tabs-header">
      <li v-for="(tab, index) in tabs" :key="index" @click="activeTab(index)" :class="{ active: index === activeIndex }">{{ tab.label }}</li>
    </ul>
    <div class="tabs-body">
      <slot :tab="tabs[activeIndex]"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [],
      activeIndex: 0
    };
  },
  mounted() {
    this.tabs = this.$slots.default
      .filter(vnode => vnode.tag)
      .map(vnode => ({ label: vnode.data.attrs.label, content: vnode }));
  },
  methods: {
    activeTab(index) {
      this.activeIndex = index;
    }
  }
};
</script>

<style scoped>
.tabs {
  display: flex;
  flex-direction: column;
}
.tabs-header {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ccc;
}
.tabs-header li {
  flex-grow: 1;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}
.tabs-header .active {
  color: red;
  border-bottom: 2px solid red;
}
.tabs-body {
  padding: 20px;
}
</style>

使用方法：

<template>
  <tabs>
    <template v-slot:default="{ tab }">
      <div v-html="tab.content.children[0].text"></div>
    </template>
    <div label="选项卡 1">选项卡 1 内容</div>
    <div label="选项卡 2">选项卡 2 内容</div>
    <div label="选项卡 3">选项卡 3 内容</div>
  </tabs>
</template>

<script>
import Tabs from "./Tabs.vue";

export default {
  components: {
    Tabs
  }
};
</script>

该代码仅作为参考，您可以根据需要进行修改和扩展。