vue 实现tabs
使用 Vue 实现 Tabs 组件
在 Vue 中实现 Tabs 组件可以通过动态组件或条件渲染完成。以下是两种常见实现方式：
动态组件实现
通过动态组件切换不同的 Tab 内容：
<template>
<div class="tabs">
<div class="tabs-header">
<button
v-for="(tab, index) in tabs"
:key="index"
@click="currentTab = tab"
:class="{ active: currentTab === tab }"
>
{{ tab.name }}
</button>
</div>
<div class="tabs-content">
<component :is="currentTab.component" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentTab: null,
tabs: [
{ name: 'Tab 1', component: 'Tab1' },
{ name: 'Tab 2', component: 'Tab2' },
{ name: 'Tab 3', component: 'Tab3' }
]
}
},
created() {
this.currentTab = this.tabs[0]
}
}
</script>
<style>
.tabs-header button.active {
background: #ddd;
}
</style>条件渲染实现
使用 v-if 或 v-show 控制 Tab 内容的显示：
<template>
<div class="tabs">
<div class="tabs-header">
<button
v-for="(tab, index) in tabs"
:key="index"
@click="activeTab = index"
:class="{ active: activeTab === index }"
>
{{ tab.name }}
</button>
</div>
<div class="tabs-content">
<div v-for="(tab, index) in tabs" :key="index">
<div v-show="activeTab === index">
{{ tab.content }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 0,
tabs: [
{ name: 'Tab 1', content: 'Content for Tab 1' },
{ name: 'Tab 2', content: 'Content for Tab 2' },
{ name: 'Tab 3', content: 'Content for Tab 3' }
]
}
}
}
</script>使用 Vue Router 实现
对于更复杂的应用，可以结合 Vue Router 实现 Tabs：
const routes = [
{ path: '/tab1', component: Tab1 },
{ path: '/tab2', component: Tab2 },
{ path: '/tab3', component: Tab3 }
]
const router = new VueRouter({
routes
})
new Vue({
router
}).$mount('#app')<router-link to="/tab1">Tab 1</router-link>
<router-link to="/tab2">Tab 2</router-link>
<router-link to="/tab3">Tab 3</router-link>
<router-view></router-view>第三方库方案
对于更丰富的功能，可以考虑使用现成的 UI 库：
-
Element UI 的 Tabs 组件：
<el-tabs v-model="activeTab"> <el-tab-pane label="Tab 1" name="tab1">Content 1</el-tab-pane> <el-tab-pane label="Tab 2" name="tab2">Content 2</el-tab-pane> </el-tabs> -
Vuetify 的 Tabs 组件：
<v-tabs v-model="activeTab"> <v-tab>Tab 1</v-tab> <v-tab>Tab 2</v-tab>
这些方法提供了从简单到复杂的 Tabs 实现方案，可以根据项目需求选择合适的实现方式。
