vue实现tab互斥

实现Tab互斥的常见方法

在Vue中实现Tab互斥（即同一时间只有一个Tab处于激活状态）可以通过以下方式完成：

使用v-model和v-show/v-if

通过v-model绑定当前激活的Tab索引，结合v-show或v-if控制显示：

<template>
  <div>
    <button 
      v-for="(tab, index) in tabs" 
      :key="index"
      @click="activeTab = index"
    >
      {{ tab.title }}
    </button>

    <div v-for="(tab, index) in tabs" :key="index">
      <div v-show="activeTab === index">
        {{ tab.content }}
      </div>
    </div>
  </div>
</template>

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

使用计算属性优化

通过计算属性确定当前激活的Tab内容：

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

    <div>
      {{ currentTabContent }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [...]
    }
  },
  computed: {
    currentTabContent() {
      return this.tabs[this.activeTab].content
    }
  }
}
</script>

使用动态组件

对于更复杂的Tab内容，可以使用动态组件：

<template>
  <div>
    <button 
      v-for="(tab, index) in tabs" 
      :key="index"
      @click="activeTab = index"
    >
      {{ tab.title }}
    </button>

    <component :is="currentComponent" />
  </div>
</template>

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

export default {
  components: { Tab1, Tab2 },
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: 'Tab 1', component: 'Tab1' },
        { title: 'Tab 2', component: 'Tab2' }
      ]
    }
  },
  computed: {
    currentComponent() {
      return this.tabs[this.activeTab].component
    }
  }
}
</script>

使用第三方UI库

许多UI库如Element UI、Vuetify等提供了现成的Tab组件：

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

<script>
export default {
  data() {
    return {
      activeTab: 'tab1'
    }
  }
}
</script>

关键实现要点

• 维护一个响应式的activeTab变量存储当前激活Tab的索引或标识
• 通过点击事件更新activeTab的值
• 使用条件渲染（v-if/v-show）或动态组件控制内容显示
• 可以为激活的Tab按钮添加样式类增强用户体验

样式处理建议

为激活状态的Tab添加特殊样式：

button.active {
  background-color: #4CAF50;
  color: white;
}

以上方法均可实现Tab的互斥效果，选择哪种取决于项目需求和复杂度。对于简单场景，第一种方法足够；复杂场景建议使用动态组件或UI库方案。