当前位置：首页 > VUE

vue 实现tab过渡切换

2026-02-23 17:05:54VUE

实现 Tab 过渡切换的方法

在 Vue 中实现带有过渡效果的 Tab 切换，可以通过 <transition> 或 <transition-group> 组件结合 CSS 过渡或动画实现。以下是具体实现步骤：

使用 `<transition>` 组件

基本结构
在模板中定义 Tab 标签和内容区域，使用 v-if 或 v-show 控制内容显示：

<div class="tabs">
  <div class="tab-buttons">
    <button @click="currentTab = 'tab1'">Tab 1</button>
    <button @click="currentTab = 'tab2'">Tab 2</button>
  </div>
  <transition name="fade" mode="out-in">
    <div class="tab-content" v-if="currentTab === 'tab1'" key="tab1">
      Content for Tab 1
    </div>
    <div class="tab-content" v-else-if="currentTab === 'tab2'" key="tab2">
      Content for Tab 2
    </div>
  </transition>
</div>

CSS 过渡样式
定义过渡效果的 CSS 类：

vue 实现tab过渡切换

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

Vue 数据绑定
在 data 中定义 currentTab：

data() {
  return {
    currentTab: 'tab1'
  };
}

使用动态组件 `<component>`

动态组件切换
结合 <component> 和 is 属性动态切换组件：

vue 实现tab过渡切换

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

组件定义与注册
定义 Tab 对应的组件并注册：

const Tab1 = { template: '<div>Tab 1 Content</div>' };
const Tab2 = { template: '<div>Tab 2 Content</div>' };

export default {
  components: { Tab1, Tab2 },
  data() {
    return {
      currentTab: 'Tab1'
    };
  },
  computed: {
    currentTabComponent() {
      return this.currentTab.toLowerCase();
    }
  }
};

滑动过渡效果
使用 CSS 实现滑动动画：

.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s ease;
}
.slide-enter-from {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}

进阶：自定义过渡类名

通过 enter-active-class 和 leave-active-class 指定自定义类名：

<transition 
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="show">Content</div>
</transition>