组件代码
<template><div><ul class="tab-nav"><li v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeTab === index }" @click="setActiveTab(index)">{{ tab.title }}</li></ul><div class="tab-content"><slot :name="tabs[activeTab].name"></slot></div></div></template><script>export default {props: {tabs: {type: Array,required: true,default: () => [],},},data() {return {activeTab: 0,};},methods: {setActiveTab(index) {this.activeTab = index;},},};</script><style>.tab-nav {display: flex;list-style-type: none;margin: 0;padding: 0;}.tab-nav li {cursor: pointer;padding: 10px 20px;border: 1px solid #ddd;border-bottom: none;border-top-left-radius: 5px;border-top-right-radius: 5px;}.tab-nav li.active {background-color: #fff;border-bottom: 1px solid #ddd;}.tab-content {border: 1px solid #ddd;padding: 20px;border-top: none;}</style>
这个组件使用了一个tabs属性来传递选项卡的配置信息，每个选项卡都有一个title属性来设置选项卡标题，还可以添加其他需要的属性，如name等。在模板中，我们使用了v-for指令来渲染选项卡的标签，使用activeTab变量来表示当前激活的选项卡。点击选项卡时，我们使用setActiveTab方法来更新activeTab的值，然后在模板中使用slot指令来渲染对应的选项卡内容。最后，我们使用 CSS 样式来设置选项卡和内容的样式。
使用示例：
<template><div><Tab :tabs="tabs" v-model="activeTab"><template v-for="(tab, index) in tabs"><TabPane :key="index" :name="tab.name"><p>{{ tab.content }}</p></TabPane></template></Tab></div></template><script>import { Tab, TabPane } from '@/components'export default {name: 'TabDemo',components: {Tab,TabPane,},data() {return {activeTab: 'tab1',tabs: [{name: 'tab1',label: 'Tab 1',content: 'This is tab 1 content',},{name: 'tab2',label: 'Tab 2',content: 'This is tab 2 content',},{name: 'tab3',label: 'Tab 3',content: 'This is tab 3 content',},],}},}</script>
来源：chatgpt3.5
