vue 组件实现tab切换

使用动态组件实现Tab切换

在Vue中可以通过动态组件<component :is="currentTab">结合v-for循环实现基础Tab切换功能。需要定义tabs数组和currentTab数据属性：

<template>
  <div>
    <div class="tab-buttons">
      <button 
        v-for="tab in tabs" 
        :key="tab.name"
        @click="currentTab = tab.component"
        :class="{ active: currentTab === tab.component }"
      >
        {{ tab.name }}
      </button>
    </div>
    <component :is="currentTab" class="tab-content"/>
  </div>
</template>

<script>
import Tab1 from './Tab1.vue'
import Tab2 from './Tab2.vue'

export default {
  data() {
    return {
      currentTab: 'Tab1',
      tabs: [
        { name: 'Tab 1', component: 'Tab1' },
        { name: 'Tab 2', component: 'Tab2' }
      ]
    }
  },
  components: { Tab1, Tab2 }
}
</script>

<style>
.tab-buttons button.active {
  background-color: #ddd;
}
</style>

使用路由实现Tab切换

对于SPA应用，可以通过Vue Router实现更复杂的Tab切换：

// router.js
const routes = [
  { path: '/tab1', component: Tab1 },
  { path: '/tab2', component: Tab2 }
]

<template>
  <div>
    <router-link to="/tab1" custom v-slot="{ navigate }">
      <button @click="navigate">Tab 1</button>
    </router-link>
    <router-link to="/tab2" custom v-slot="{ navigate }">
      <button @click="navigate">Tab 2</button>
    </router-link>
    <router-view/>
  </div>
</template>

使用第三方库

对于更丰富的Tab功能，可以考虑使用现成的UI库：

npm install vue-tabs-component

<template>
  <tabs>
    <tab name="First tab">
      First tab content
    </tab>
    <tab name="Second tab">
      Second tab content
    </tab>
  </tabs>
</template>

<script>
import { Tabs, Tab } from 'vue-tabs-component'

export default {
  components: { Tabs, Tab }
}
</script>

带动画效果的Tab切换

可以通过Vue的过渡系统为Tab切换添加动画：

<transition name="fade" mode="out-in">
  <component :is="currentTab"/>
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

状态保持的Tab内容

使用<keep-alive>包裹动态组件可以保持Tab状态：

<keep-alive>
  <component :is="currentTab"/>
</keep-alive>