vue怎么实现 tab

Vue 实现 Tab 的方法

在 Vue 中实现 Tab 功能可以通过多种方式完成，常见的有动态组件、条件渲染或第三方库。以下是几种常见的实现方法：

使用动态组件和 v-if 条件渲染

动态组件结合 v-if 是最基础的方式之一，适合简单的 Tab 切换需求。

<template>
  <div>
    <div class="tab-buttons">
      <button @click="activeTab = 'tab1'">Tab 1</button>
      <button @click="activeTab = 'tab2'">Tab 2</button>
    </div>
    <div class="tab-content">
      <div v-if="activeTab === 'tab1'">内容 1</div>
      <div v-if="activeTab === 'tab2'">内容 2</div>
    </div>
  </div>
</template>

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

使用 <component> 动态组件

动态组件 <component> 结合 :is 属性可以实现更灵活的 Tab 切换。

<template>
  <div>
    <div class="tab-buttons">
      <button @click="currentComponent = 'Tab1'">Tab 1</button>
      <button @click="currentComponent = 'Tab2'">Tab 2</button>
    </div>
    <component :is="currentComponent"></component>
  </div>
</template>

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

export default {
  components: {
    Tab1,
    Tab2
  },
  data() {
    return {
      currentComponent: 'Tab1'
    };
  }
};
</script>

使用 Vue Router 实现路由级 Tab

如果 Tab 需要与路由关联，可以使用 Vue Router 实现。

// router.js
import { createRouter, createWebHistory } from 'vue-router';
import Tab1 from './views/Tab1.vue';
import Tab2 from './views/Tab2.vue';

const routes = [
  { path: '/tab1', component: Tab1 },
  { path: '/tab2', component: Tab2 }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

<template>
  <div>
    <router-link to="/tab1">Tab 1</router-link>
    <router-link to="/tab2">Tab 2</router-link>
    <router-view></router-view>
  </div>
</template>

使用第三方库（如 Element UI）

许多 UI 库（如 Element UI、Vuetify）提供了现成的 Tab 组件。

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

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

样式优化

为 Tab 添加样式可以提升用户体验，例如高亮当前选中的 Tab。

.tab-buttons button {
  padding: 8px 16px;
  margin-right: 5px;
  background: #f0f0f0;
  border: none;
  cursor: pointer;
}

.tab-buttons button.active {
  background: #42b983;
  color: white;
}

<button 
  @click="activeTab = 'tab1'"
  :class="{ active: activeTab === 'tab1' }"
>
  Tab 1
</button>

动态生成 Tab

如果需要动态生成 Tab，可以通过遍历数组实现。

<template>
  <div>
    <div class="tab-buttons">
      <button 
        v-for="tab in tabs" 
        :key="tab.id"
        @click="activeTab = tab.id"
        :class="{ active: activeTab === tab.id }"
      >
        {{ tab.name }}
      </button>
    </div>
    <div class="tab-content">
      {{ tabs.find(t => t.id === activeTab).content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1',
      tabs: [
        { id: 'tab1', name: 'Tab 1', content: '内容 1' },
        { id: 'tab2', name: 'Tab 2', content: '内容 2' }
      ]
    };
  }
};
</script>

以上方法可以根据需求灵活选择，从简单的手动实现到复杂的动态生成，都能满足不同场景的需求。