vue 实现tab贴合

实现Tab贴合的基本思路

在Vue中实现Tab贴合功能通常涉及动态切换内容区域，同时高亮当前选中的Tab标签。核心逻辑是通过数据驱动视图变化，结合CSS样式控制显示与隐藏。

基础实现方法

模板结构

<div class="tab-container">
  <div class="tab-header">
    <div 
      v-for="(tab, index) in tabs" 
      :key="index"
      @click="activeTab = index"
      :class="{ 'active': activeTab === index }"
    >
      {{ tab.title }}
    </div>
  </div>
  <div class="tab-content">
    <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index">
      {{ tab.content }}
    </div>
  </div>
</div>

脚本部分

data() {
  return {
    activeTab: 0,
    tabs: [
      { title: 'Tab 1', content: 'Content 1' },
      { title: 'Tab 2', content: 'Content 2' },
      { title: 'Tab 3', content: 'Content 3' }
    ]
  }
}

样式部分

.tab-header {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.tab-header div {
  padding: 10px 20px;
  cursor: pointer;
}
.tab-header div.active {
  border-bottom: 2px solid #42b983;
  color: #42b983;
}
.tab-content {
  padding: 20px;
}

动态组件实现方式

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

<component :is="tabs[activeTab].component"></component>

数据中需要定义组件：

tabs: [
  { title: 'Tab 1', component: 'ComponentA' },
  { title: 'Tab 2', component: 'ComponentB' }
]

保持组件状态

使用<keep-alive>包裹动态组件可保持状态：

<keep-alive>
  <component :is="tabs[activeTab].component"></component>
</keep-alive>

路由集成方案

结合Vue Router实现路由级Tab：

const routes = [
  { path: '/tab1', component: Tab1 },
  { path: '/tab2', component: Tab2 }
]

模板中使用router-link：

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

响应式设计优化

添加响应式断点处理：

@media (max-width: 768px) {
  .tab-header {
    flex-direction: column;
  }
}

动画过渡效果

为切换添加过渡动画：

<transition name="fade" mode="out-in">
  <component :is="tabs[activeTab].component"></component>
</transition>

配套CSS：

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