当前位置：首页 > VUE

vue顶部tab实现

2026-01-19 11:12:36VUE

实现顶部 Tab 的基本方法

在 Vue 中实现顶部 Tab 可以通过多种方式完成，常见的有使用 v-for 动态生成 Tab 标签，结合 v-show 或 v-if 控制内容显示。

<template>
  <div>
    <div class="tabs">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="{ 'active': activeTab === index }"
        @click="activeTab = index"
      >
        {{ tab.title }}
      </div>
    </div>
    <div class="tab-content">
      <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index">
        {{ tab.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: 'Tab 1', content: 'Content 1' },
        { title: 'Tab 2', content: 'Content 2' },
        { title: 'Tab 3', content: 'Content 3' }
      ]
    };
  }
};
</script>

<style>
.tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.tabs div {
  padding: 10px 20px;
  cursor: pointer;
}
.tabs div.active {
  border-bottom: 2px solid #42b983;
  color: #42b983;
}
.tab-content {
  padding: 20px;
}
</style>

使用第三方组件库

如果需要更丰富的功能，可以使用第三方组件库如 Element UI、Ant Design Vue 或 Vuetify 提供的 Tab 组件。

Element UI 示例：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab1">Content 1</el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">Content 2</el-tab-pane>
    <el-tab-pane label="Tab 3" name="tab3">Content 3</el-tab-pane>
  </el-tabs>
</template>

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

实现动画效果

为 Tab 切换添加过渡动画可以通过 Vue 的 <transition> 组件实现。

<template>
  <div>
    <div class="tabs">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="{ 'active': activeTab === index }"
        @click="activeTab = index"
      >
        {{ tab.title }}
      </div>
    </div>
    <transition name="fade" mode="out-in">
      <div class="tab-content" :key="activeTab">
        {{ tabs[activeTab].content }}
      </div>
    </transition>
  </div>
</template>

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

响应式 Tab 设计

对于移动端或需要响应式布局的场景，可以通过 CSS 媒体查询调整 Tab 样式。

.tabs {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
}
.tabs div {
  padding: 10px;
  min-width: 80px;
  text-align: center;
}
@media (max-width: 768px) {
  .tabs div {
    padding: 8px 12px;
  }
}

动态添加/删除 Tab

如果需要支持动态添加或删除 Tab，可以通过修改 tabs 数组实现。

methods: {
  addTab() {
    this.tabs.push({
      title: `Tab ${this.tabs.length + 1}`,
      content: `Content ${this.tabs.length + 1}`
    });
  },
  removeTab(index) {
    this.tabs.splice(index, 1);
    if (this.activeTab >= this.tabs.length) {
      this.activeTab = this.tabs.length - 1;
    }
  }
}

以上方法涵盖了从基础实现到高级功能的顶部 Tab 开发方案，可以根据实际需求选择适合的方式。

vue顶部tab实现