vue框架实现tab

Vue 框架实现 Tab 功能

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

动态组件结合 v-for

通过 v-for 渲染 Tab 标题，利用 :is 动态切换组件：

<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" />
  </div>
</template>

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

条件渲染 (v-if/v-show)

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

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="activeTab = index"
        :class="{ active: activeTab === index }"
      >
        {{ tab }}
      </button>
    </div>
    <div class="content">
      <div v-if="activeTab === 0">Home Content</div>
      <div v-if="activeTab === 1">About Content</div>
      <div v-if="activeTab === 2">Contact Content</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['Home', 'About', 'Contact'],
      activeTab: 0
    };
  }
};
</script>

使用第三方库（如 vue-router）

通过路由实现 Tab 导航：

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

样式优化

为 Tab 添加基础样式：

.tabs button {
  padding: 8px 16px;
  border: none;
  background: #f0f0f0;
  cursor: pointer;
}

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

.content {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #eee;
}

响应式 Tab 组件

封装为可复用的组件：

<!-- TabWrapper.vue -->
<template>
  <div>
    <slot name="header" :tabs="tabs" :setActiveTab="setActiveTab"></slot>
    <slot :activeTab="activeTab"></slot>
  </div>
</template>

<script>
export default {
  props: {
    initialTab: { type: Number, default: 0 }
  },
  data() {
    return {
      activeTab: this.initialTab,
      tabs: []
    };
  },
  methods: {
    setActiveTab(index) {
      this.activeTab = index;
    }
  }
};
</script>

调用方式：

<template>
  <tab-wrapper>
    <template #header="{ tabs, setActiveTab }">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="setActiveTab(index)"
      >
        {{ tab.label }}
      </button>
    </template>
    <template #default="{ activeTab }">
      <div v-if="activeTab === 0">Content 1</div>
      <div v-if="activeTab === 1">Content 2</div>
    </template>
  </tab-wrapper>
</template>

以上方法可根据项目需求选择，动态组件适合复杂内容切换，条件渲染适合简单场景，路由适合多页面应用。