vue 实现选项卡

实现选项卡的基本思路

在Vue中实现选项卡功能，可以通过动态绑定class和v-show或v-if来控制内容的显示与隐藏。主要分为三个部分：选项卡标题、选项卡内容、以及切换逻辑。

使用v-show实现选项卡

通过v-show指令控制内容的显示与隐藏，结合activeTab数据属性来跟踪当前选中的选项卡。

<template>
  <div class="tabs">
    <div class="tab-headers">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        @click="activeTab = index"
        :class="{ 'active': activeTab === index }"
      >
        {{ tab.title }}
      </button>
    </div>
    <div class="tab-contents">
      <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: [
        { title: 'Tab 1', content: 'Content for Tab 1' },
        { title: 'Tab 2', content: 'Content for Tab 2' },
        { title: 'Tab 3', content: 'Content for Tab 3' }
      ]
    };
  }
};
</script>

<style>
.tab-headers button {
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  background: #f0f0f0;
}
.tab-headers button.active {
  background: #ddd;
}
.tab-contents {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ddd;
}
</style>

使用v-if实现选项卡

v-if与v-show的区别在于v-if会完全销毁和重建DOM元素，而v-show仅切换display属性。根据需求选择合适的方式。

<template>
  <div class="tabs">
    <div class="tab-headers">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        @click="activeTab = index"
        :class="{ 'active': activeTab === index }"
      >
        {{ tab.title }}
      </button>
    </div>
    <div class="tab-contents">
      <div v-if="activeTab === 0">
        Content for Tab 1
      </div>
      <div v-else-if="activeTab === 1">
        Content for Tab 2
      </div>
      <div v-else-if="activeTab === 2">
        Content for Tab 3
      </div>
    </div>
  </div>
</template>

使用动态组件实现选项卡

通过动态组件（<component :is>）可以实现更灵活的选项卡内容切换，适用于不同组件作为选项卡内容的场景。

<template>
  <div class="tabs">
    <div class="tab-headers">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        @click="activeTab = tab.component"
        :class="{ 'active': activeTab === tab.component }"
      >
        {{ tab.title }}
      </button>
    </div>
    <div class="tab-contents">
      <component :is="activeTab" />
    </div>
  </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 {
      activeTab: 'Tab1',
      tabs: [
        { title: 'Tab 1', component: 'Tab1' },
        { title: 'Tab 2', component: 'Tab2' },
        { title: 'Tab 3', component: 'Tab3' }
      ]
    };
  }
};
</script>

使用Vue Router实现选项卡

如果需要结合路由实现选项卡，可以通过<router-link>和<router-view>完成。

<template>
  <div class="tabs">
    <div class="tab-headers">
      <router-link
        v-for="(tab, index) in tabs"
        :key="index"
        :to="tab.path"
        active-class="active"
      >
        {{ tab.title }}
      </router-link>
    </div>
    <div class="tab-contents">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: 'Tab 1', path: '/tab1' },
        { title: 'Tab 2', path: '/tab2' },
        { title: 'Tab 3', path: '/tab3' }
      ]
    };
  }
};
</script>

选项卡动画效果

通过Vue的过渡动画（<transition>或<transition-group>）可以为选项卡切换添加平滑的动画效果。

<template>
  <div class="tabs">
    <div class="tab-headers">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        @click="activeTab = index"
        :class="{ 'active': activeTab === index }"
      >
        {{ tab.title }}
      </button>
    </div>
    <div class="tab-contents">
      <transition name="fade" mode="out-in">
        <div v-show="activeTab === 0" key="1">
          Content for Tab 1
        </div>
        <div v-show="activeTab === 1" key="2">
          Content for Tab 2
        </div>
        <div v-show="activeTab === 2" key="3">
          Content for Tab 3
        </div>
      </transition>
    </div>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

以上方法涵盖了Vue中实现选项卡的常见场景，可以根据实际需求选择合适的方式。