vue实现选项卡分页
Vue实现选项卡分页的方法
使用动态组件切换
通过Vue的<component>标签和is属性动态切换不同组件，结合v-for渲染选项卡标题。
<template>
<div>
<div class="tabs">
<button
v-for="(tab, index) in tabs"
:key="index"
@click="currentTab = tab.component"
:class="{ active: currentTab === tab.component }"
>
{{ tab.name }}
</button>
</div>
<component :is="currentTab" />
</div>
</template>
<script>
import Tab1 from './Tab1.vue'
import Tab2 from './Tab2.vue'
export default {
components: { Tab1, Tab2 },
data() {
return {
currentTab: 'Tab1',
tabs: [
{ name: '标签1', component: 'Tab1' },
{ name: '标签2', component: 'Tab2' }
]
}
}
}
</script>
<style>
.active {
background-color: #42b983;
color: white;
}
</style>结合路由实现
在Vue Router中配置嵌套路由，通过<router-link>实现导航。
// router.js
const routes = [
{
path: '/tabs',
component: TabsContainer,
children: [
{ path: 'tab1', component: Tab1 },
{ path: 'tab2', component: Tab2 }
]
}
]<!-- TabsContainer.vue -->
<template>
<div>
<router-link to="/tabs/tab1">标签1</router-link>
<router-link to="/tabs/tab2">标签2</router-link>
<router-view></router-view>
</div>
</template>使用第三方库
Element UI等UI框架提供现成的Tabs组件：
<template>
<el-tabs v-model="activeTab">
<el-tab-pane label="标签1" name="tab1">
<Tab1 />
</el-tab-pane>
<el-tab-pane label="标签2" name="tab2">
<Tab2 />
</el-tab-pane>
</el-tabs>
</template>
<script>
import { ElTabs, ElTabPane } from 'element-ui'
export default {
components: { ElTabs, ElTabPane },
data() {
return {
activeTab: 'tab1'
}
}
}
</script>关键实现细节
状态保持
使用<keep-alive>包裹动态组件可保留组件状态：
<keep-alive>
<component :is="currentTab" />
</keep-alive>过渡动画
添加CSS过渡效果使切换更平滑：
<transition name="fade" mode="out-in">
<component :is="currentTab" />
</transition>.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}响应式设计
通过媒体查询调整选项卡样式：
@media (max-width: 768px) {
.tabs button {
display: block;
width: 100%;
}
}
