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%;
  }
}