vue 实现tab切换效果

2026-02-24 18:04:00VUE

使用动态组件实现Tab切换

在Vue中可以通过<component :is="currentTab">动态加载不同组件实现Tab切换效果。需要准备一个数据对象存储当前激活的tab名称，并通过v-for循环渲染tab标题。

<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="currentTab" class="tab-content"></component>
  </div>
</template>

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

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

<style>
.tabs button.active {
  background-color: #42b983;
  color: white;
}
.tab-content {
  padding: 20px;
  border: 1px solid #ddd;
}
</style>

使用CSS过渡动画增强效果

可以为Tab内容切换添加平滑的过渡效果，通过Vue的<transition>组件配合CSS过渡类名实现。

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

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

使用路由实现带URL的Tab切换

对于需要记录当前Tab状态的应用，可以结合Vue Router实现。每个Tab对应一个路由路径，通过router-link替代普通按钮。

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

<template>
  <div>
    <nav>
      <router-link to="/tab1">Tab1</router-link>
      <router-link to="/tab2">Tab2</router-link>
      <router-link to="/tab3">Tab3</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

使用第三方库实现高级Tab组件

对于更复杂的需求，可以使用现成的UI库如Element UI、Ant Design Vue等提供的Tab组件。

vue 实现tab切换效果

<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-tab-pane label="角色管理" name="role">角色内容</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'user'
    }
  }
}
</script>