vue实现tab标签

使用 Vue 实现 Tab 标签

基础实现方案

模板结构

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

脚本部分

export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: '标签1', content: '内容1' },
        { title: '标签2', content: '内容2' },
        { title: '标签3', content: '内容3' }
      ]
    }
  }
}

样式部分

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

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

.tab-content div {
  padding: 16px;
  border: 1px solid #ddd;
}

组件化方案

TabContainer.vue

<template>
  <div class="tab-container">
    <slot></slot>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      tabProvider: this
    }
  },
  data() {
    return {
      activeTab: null
    }
  },
  methods: {
    setActiveTab(tab) {
      this.activeTab = tab
    }
  }
}
</script>

Tab.vue

<template>
  <div class="tab" v-show="isActive">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isActive: false
    }
  },
  inject: ['tabProvider'],
  mounted() {
    this.tabProvider.setActiveTab(this)
    this.isActive = this.tabProvider.activeTab === this
  }
}
</script>

使用方式

<tab-container>
  <tab title="标签1">
    内容1
  </tab>
  <tab title="标签2">
    内容2
  </tab>
</tab-container>

动态添加标签

实现方法

methods: {
  addTab() {
    this.tabs.push({
      title: `新标签${this.tabs.length + 1}`,
      content: `新内容${this.tabs.length + 1}`
    })
  },
  removeTab(index) {
    this.tabs.splice(index, 1)
    if (this.activeTab >= index && this.activeTab > 0) {
      this.activeTab--
    }
  }
}

路由集成方案

结合 vue-router

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

const router = new VueRouter({
  routes
})

new Vue({
  router,
  template: `
    <div>
      <router-link to="/tab1" tag="button">标签1</router-link>
      <router-link to="/tab2" tag="button">标签2</router-link>
      <router-view></router-view>
    </div>
  `
}).$mount('#app')

动画效果

添加过渡动画

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

CSS 动画

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