组件代码
<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