vue实现tab效果

2026-03-09 19:15:04VUE

使用动态组件实现Tab切换

在Vue中可以通过动态组件结合<component :is="currentTab">实现Tab内容切换。定义多个组件作为Tab内容，通过点击事件改变currentTab变量。

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

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

export default {
  data() {
    return {
      tabs: ['Tab1', 'Tab2'],
      currentTab: 'Tab1',
      components: {
        Tab1,
        Tab2
      }
    }
  },
  computed: {
    currentTabComponent() {
      return this.components[this.currentTab]
    }
  }
}
</script>

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

使用v-show控制显示隐藏

另一种简单方式是使用v-show指令控制不同Tab内容的显示隐藏，适合内容较少的场景。

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

    <div v-show="currentTab === 'tab1'">
      Tab1内容
    </div>
    <div v-show="currentTab === 'tab2'">
      Tab2内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'tab1', label: '标签1' },
        { name: 'tab2', label: '标签2' }
      ],
      currentTab: 'tab1'
    }
  }
}
</script>

使用第三方UI库实现

主流UI库如Element UI、Ant Design Vue等都提供了现成的Tab组件，可以快速实现专业效果。

以Element UI为例：

<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>

添加过渡动画效果

为Tab切换添加平滑的过渡效果可以提升用户体验，使用Vue的<transition>组件实现。

<template>
  <div>
    <!-- Tab按钮代码省略 -->
    <transition name="fade" mode="out-in">
      <component :is="currentTabComponent" :key="currentTab" />
    </transition>
  </div>
</template>

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

路由集成Tab

在需要保持Tab状态的路由场景下，可以将Tab与Vue Router集成。

vue实现tab效果

// router.js
{
  path: '/user/:tab',
  component: User,
  props: route => ({ tab: route.params.tab || 'profile' })
}

<template>
  <div>
    <router-link 
      v-for="tab in tabs"
      :key="tab.name"
      :to="`/user/${tab.name}`"
      :class="{ active: $route.params.tab === tab.name }"
    >
      {{ tab.label }}
    </router-link>
  </div>
</template>