vue标签页实现
Vue 标签页实现方法
使用动态组件和<component>标签
在Vue中可以通过动态组件实现标签页切换。需要定义多个组件，并通过<component>标签动态渲染当前选中的组件。
<template>
<div>
<div class="tabs">
<button
v-for="(tab, index) in tabs"
:key="index"
@click="currentTab = tab"
:class="{ active: currentTab === tab }"
>
{{ tab }}
</button>
</div>
<component :is="currentTabComponent" class="tab-content"></component>
</div>
</template>
<script>
import Tab1 from './Tab1.vue'
import Tab2 from './Tab2.vue'
import Tab3 from './Tab3.vue'
export default {
components: { Tab1, Tab2, Tab3 },
data() {
return {
tabs: ['Tab1', 'Tab2', 'Tab3'],
currentTab: 'Tab1'
}
},
computed: {
currentTabComponent() {
return this.currentTab
}
}
}
</script>
<style>
.tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.tabs button {
padding: 8px 16px;
background: #eee;
border: none;
cursor: pointer;
}
.tabs button.active {
background: #ddd;
font-weight: bold;
}
.tab-content {
border: 1px solid #ddd;
padding: 20px;
}
</style>使用Vue Router实现标签页
对于更复杂的应用，可以使用Vue Router实现标签页导航，每个标签对应一个路由。
// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Tab1 from './views/Tab1.vue'
import Tab2 from './views/Tab2.vue'
import Tab3 from './views/Tab3.vue'
const routes = [
{ path: '/tab1', component: Tab1 },
{ path: '/tab2', component: Tab2 },
{ path: '/tab3', component: Tab3 }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router// App.vue
<template>
<div>
<nav>
<router-link to="/tab1">Tab1</router-link>
<router-link to="/tab2">Tab2</router-link>
<router-link to="/tab3">Tab3</router-link>
</nav>
<router-view></router-view>
</div>
</template>使用第三方UI库
许多Vue UI库提供了现成的标签页组件，如Element UI、Vuetify等。
// 使用Element UI的el-tabs
<template>
<el-tabs v-model="activeTab">
<el-tab-pane label="用户管理" name="user">
用户管理内容
</el-tab-pane>
<el-tab-pane label="配置管理" name="config">
配置管理内容
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeTab: 'user'
}
}
}
</script>实现可关闭的标签页
对于需要支持关闭功能的标签页，可以维护一个标签数组，动态添加和移除。
<template>
<div>
<div class="tabs">
<div
v-for="(tab, index) in tabs"
:key="index"
@click="selectTab(index)"
:class="{ active: currentTabIndex === index }"
>
{{ tab.title }}
<span @click.stop="closeTab(index)">×</span>
</div>
<button @click="addTab">+</button>
</div>
<div class="tab-content">
{{ tabs[currentTabIndex]?.content }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabs: [
{ title: 'Tab 1', content: 'Content for tab 1' },
{ title: 'Tab 2', content: 'Content for tab 2' }
],
currentTabIndex: 0
}
},
methods: {
selectTab(index) {
this.currentTabIndex = index
},
closeTab(index) {
this.tabs.splice(index, 1)
if (this.currentTabIndex >= index && this.currentTabIndex > 0) {
this.currentTabIndex--
}
},
addTab() {
const newTabNumber = this.tabs.length + 1
this.tabs.push({
title: `Tab ${newTabNumber}`,
content: `Content for tab ${newTabNumber}`
})
this.currentTabIndex = this.tabs.length - 1
}
}
}
</script>保持标签页状态
使用<keep-alive>可以缓存不活动的组件实例，避免重新渲染。
<template>
<keep-alive>
<component :is="currentTabComponent"></component>
</keep-alive>
</template>
