vue 实现tab

Vue 实现 Tab 切换

使用动态组件实现 Tab

通过 Vue 的 component 动态组件和 v-for 指令可以实现 Tab 切换功能。

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

<script>
export default {
  data() {
    return {
      tabs: ['Home', 'About', 'Contact'],
      currentTab: 'Home'
    }
  },
  computed: {
    currentTabComponent() {
      return this.currentTab.toLowerCase() + '-tab'
    }
  }
}
</script>

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

使用条件渲染实现 Tab

通过 v-if 或 v-show 指令实现 Tab 内容的切换。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="activeTab = index"
        :class="{ active: activeTab === index }"
      >
        {{ tab.name }}
      </button>
    </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: [
        { name: 'Home', content: 'Home content' },
        { name: 'About', content: 'About content' },
        { name: 'Contact', content: 'Contact content' }
      ]
    }
  }
}
</script>

使用 Vue Router 实现 Tab

结合 Vue Router 可以实现更复杂的 Tab 切换，适合需要路由功能的场景。

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Contact from './views/Contact.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
    <router-view></router-view>
  </div>
</template>

使用第三方库实现 Tab

可以使用现成的 Vue Tab 组件库，如 vue-tabs-component。

安装：

npm install vue-tabs-component

使用：

<template>
  <tabs>
    <tab name="First tab">
      First tab content
    </tab>
    <tab name="Second tab">
      Second tab content
    </tab>
  </tabs>
</template>

<script>
import { Tabs, Tab } from 'vue-tabs-component'

export default {
  components: {
    Tabs,
    Tab
  }
}
</script>

以上方法提供了不同复杂度的 Tab 实现方案，可以根据项目需求选择合适的方式。