当前位置：首页 > VUE

vue 实现tabs

2026-03-27 08:43:11VUE

Vue 实现 Tabs 组件的方法

使用动态组件和 v-for 渲染

通过 v-for 循环渲染 tab 标题，结合动态组件切换内容区域。需要定义 tabs 数据数组和当前激活的 tab 索引。

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

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: 'Tab 1', component: 'Tab1Content' },
        { title: 'Tab 2', component: 'Tab2Content' }
      ]
    }
  }
}
</script>

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

使用 slot 插槽实现

通过具名插槽定义 tab 内容，利用 v-show 控制显示。这种方法适合内容简单的场景。

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

<script>
export default {
  props: {
    tabList: {
      type: Array,
      required: true
    },
    initialTab: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      currentTab: this.initialTab || this.tabList[0]?.name
    }
  }
}
</script>

使用第三方库

对于复杂需求，可以使用现成的 UI 库如 Element UI 或 Ant Design Vue：

<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>
import { ElTabs, ElTabPane } from 'element-plus'

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

动画过渡效果

为 tab 切换添加平滑的过渡动画，提升用户体验：

<template>
  <div class="tabs">
    <!-- 头部代码同上 -->
    <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>

响应式设计

针对移动端优化 tabs 显示，在小屏幕下改为垂直布局：

vue 实现tabs

@media (max-width: 768px) {
  .tab-headers {
    flex-direction: column;
  }
  .tab-headers div.active {
    border-bottom: none;
    border-left: 2px solid #42b983;
  }
}

以上方法可根据实际项目需求选择或组合使用，每种实现方式都有其适用场景。动态组件方式适合内容复杂的场景，插槽方式适合简单内容，第三方库能快速实现标准功能。