vue实现 选项卡

Vue 实现选项卡功能

在 Vue 中实现选项卡功能可以通过动态组件或条件渲染实现，以下是两种常见方法：

动态组件实现

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

    <component :is="currentTabComponent" class="tab-content"></component>
  </div>
</template>

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

export default {
  components: { Tab1, Tab2, Tab3 },
  data() {
    return {
      tabs: ['Tab1', 'Tab2', 'Tab3'],
      currentTab: 'Tab1'
    }
  },
  computed: {
    currentTabComponent() {
      return this.currentTab.toLowerCase()
    }
  }
}
</script>

<style>
.tab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-buttons button {
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  background: #eee;
}

.tab-buttons button.active {
  background: #ddd;
  font-weight: bold;
}

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

条件渲染实现

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

    <div class="tab-content">
      <div v-if="currentTab === 'home'">
        <h3>首页内容</h3>
        <p>这里是首页的详细内容...</p>
      </div>

      <div v-if="currentTab === 'about'">
        <h3>关于我们</h3>
        <p>公司简介和团队信息...</p>
      </div>

      <div v-if="currentTab === 'contact'">
        <h3>联系方式</h3>
        <p>电话: 123-456-7890</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'home', label: '首页' },
        { name: 'about', label: '关于' },
        { name: 'contact', label: '联系' }
      ],
      currentTab: 'home'
    }
  }
}
</script>

使用 Vue Router 实现

对于更复杂的应用，可以使用 Vue Router 实现选项卡式导航：

// router.js
const routes = [
  { path: '/', component: Home, name: 'home' },
  { path: '/about', component: About, name: 'about' },
  { path: '/contact', component: Contact, name: 'contact' }
]

// App.vue
<template>
  <div>
    <nav>
      <router-link 
        v-for="route in routes" 
        :key="route.path"
        :to="{ name: route.name }"
        active-class="active"
      >
        {{ route.name }}
      </router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

使用第三方库

对于更高级的选项卡需求，可以考虑使用第三方 UI 库：

1. Element UI 的 Tabs 组件：

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

2. Vuetify 的 v-tabs 组件：

   

   
   <v-tabs v-model="tab">
   <v-tab>Tab One</v-tab>
   <v-tab>Tab Two</v-tab>

内容一 内容二 ```

以上方法可以根据项目需求选择适合的实现方式，动态组件适合内容完全不同的选项卡，条件渲染适合简单场景，而路由方式适合作为导航使用。