vue实现tab功能

Vue 实现 Tab 功能的方法

使用动态组件和 v-if/v-show

通过动态组件或条件渲染实现 Tab 切换，适合简单场景。

<template>
  <div>
    <div class="tab-buttons">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = tab.name"
        :class="{ active: currentTab === tab.name }"
      >
        {{ tab.label }}
      </button>
    </div>

    <!-- 方法1: v-if -->
    <div v-if="currentTab === 'tab1'">内容1</div>
    <div v-else-if="currentTab === 'tab2'">内容2</div>

    <!-- 方法2: 动态组件 -->
    <component :is="currentTabComponent" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'tab1', label: '标签1' },
        { name: 'tab2', label: '标签2' }
      ],
      currentTab: 'tab1'
    }
  },
  computed: {
    currentTabComponent() {
      return this.currentTab === 'tab1' ? 'ComponentA' : 'ComponentB'
    }
  }
}
</script>

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

使用 Vue Router

适合需要 URL 同步或复杂路由的场景。

<template>
  <div>
    <router-link 
      v-for="(tab, index) in tabs" 
      :key="index"
      :to="tab.path"
      active-class="active"
    >
      {{ tab.label }}
    </router-link>

    <router-view></router-view>
  </div>
</template>

使用第三方库

如 vue-tabs-component 等库可快速实现高级功能。

安装：

npm install vue-tabs-component

使用：

<template>
  <tabs>
    <tab name="First tab" :selected="true">
      第一个标签内容
    </tab>
    <tab name="Second tab">
      第二个标签内容
    </tab>
  </tabs>
</template>

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

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

动画效果增强

通过过渡动画提升用户体验。

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

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

响应式设计

结合 CSS 实现移动端适配。

.tab-buttons {
  display: flex;
  overflow-x: auto;
}

@media (max-width: 768px) {
  .tab-buttons button {
    padding: 8px 12px;
    font-size: 14px;
  }
}

以上方法可根据项目需求选择，动态组件适合简单交互，Vue Router 适合复杂路由，第三方库能快速实现高级功能。动画和响应式设计可进一步提升用户体验。