当前位置：首页 > VUE

vue 实现tab贴合

2026-02-18 12:32:06VUE

Vue 实现 Tab 贴合效果

在 Vue 中实现 Tab 贴合效果（即标签页切换内容联动）可以通过动态组件或条件渲染实现。以下是两种常见方法：

动态组件结合 `v-bind:is`

通过 Vue 的 <component> 动态组件绑定当前选中的组件名：

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

<script>
export default {
  data() {
    return {
      currentTab: 'Home',
      tabs: [
        { name: 'Home', label: '首页' },
        { name: 'Posts', label: '文章' },
        { name: 'Archive', label: '归档' }
      ]
    }
  },
  computed: {
    currentTabComponent() {
      return this.currentTab.toLowerCase() + '-tab';
    }
  }
}
</script>

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

条件渲染 `v-if`/`v-show`

通过 v-if 或 v-show 控制不同内容的显示：

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.id"
        @click="currentTab = tab.id"
        :class="{ active: currentTab === tab.id }"
      >
        {{ tab.label }}
      </button>
    </div>
    <div v-if="currentTab === 'home'" class="tab-content">首页内容</div>
    <div v-if="currentTab === 'posts'" class="tab-content">文章列表</div>
    <div v-if="currentTab === 'archive'" class="tab-content">归档内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'home',
      tabs: [
        { id: 'home', label: '首页' },
        { id: 'posts', label: '文章' },
        { id: 'archive', label: '归档' }
      ]
    }
  }
}
</script>

使用第三方库

如需更复杂的 Tab 功能（如动画、URL 同步等），可考虑以下库：

Vuetify 的 v-tabs 组件
Element UI 的 el-tabs 组件
BootstrapVue 的 b-tabs 组件

以 Element UI 为例：

vue 实现tab贴合

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="首页" name="home">首页内容</el-tab-pane>
    <el-tab-pane label="文章" name="posts">文章列表</el-tab-pane>
    <el-tab-pane label="归档" name="archive">归档内容</el-tab-pane>
  </el-tabs>
</template>

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