vue 实现tabs

使用 Vue 实现 Tabs 组件

在 Vue 中实现 Tabs 组件可以通过动态组件或条件渲染完成。以下是两种常见实现方式：

动态组件实现

通过动态组件切换不同的 Tab 内容：

<template>
  <div class="tabs">
    <div class="tabs-header">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = tab"
        :class="{ active: currentTab === tab }"
      >
        {{ tab.name }}
      </button>
    </div>
    <div class="tabs-content">
      <component :is="currentTab.component" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: null,
      tabs: [
        { name: 'Tab 1', component: 'Tab1' },
        { name: 'Tab 2', component: 'Tab2' },
        { name: 'Tab 3', component: 'Tab3' }
      ]
    }
  },
  created() {
    this.currentTab = this.tabs[0]
  }
}
</script>

<style>
.tabs-header button.active {
  background: #ddd;
}
</style>

条件渲染实现

使用 v-if 或 v-show 控制 Tab 内容的显示：

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

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

使用 Vue Router 实现

对于更复杂的应用，可以结合 Vue Router 实现 Tabs：

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

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

<router-link to="/tab1">Tab 1</router-link>
<router-link to="/tab2">Tab 2</router-link>
<router-link to="/tab3">Tab 3</router-link>

<router-view></router-view>

第三方库方案

对于更丰富的功能，可以考虑使用现成的 UI 库：

1. Element UI 的 Tabs 组件：

   <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-tabs>

2. Vuetify 的 Tabs 组件：

   

   
   <v-tabs v-model="activeTab">
   <v-tab>Tab 1</v-tab>
   <v-tab>Tab 2</v-tab>

Content 1 Content 2 ```

这些方法提供了从简单到复杂的 Tabs 实现方案，可以根据项目需求选择合适的实现方式。