vue实现tabs

Vue实现Tabs组件的方法

基础实现

使用Vue的组件系统结合动态组件或条件渲染实现Tabs功能。

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

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

<style>
.tabs-header {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.tabs-header div {
  padding: 10px 20px;
  cursor: pointer;
}
.tabs-header div.active {
  border-bottom: 2px solid blue;
}
.tabs-content {
  padding: 20px;
}
</style>

使用slot插槽

通过具名插槽实现更灵活的Tabs内容控制。

<template>
  <div class="tabs">
    <div class="tabs-header">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="activeTab = index"
        :class="{ 'active': activeTab === index }"
      >
        {{ tab }}
      </div>
    </div>
    <div class="tabs-content">
      <slot :name="tabs[activeTab]"></slot>
    </div>
  </div>
</template>

动态添加Tab

实现可动态添加和删除的Tabs功能。

<template>
  <div>
    <button @click="addTab">Add Tab</button>
    <div class="tabs">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="activeTab = index"
        :class="{ 'active': activeTab === index }"
      >
        {{ tab.title }}
        <span @click.stop="removeTab(index)">×</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        { title: 'Tab 1', content: 'Content 1' },
        { title: 'Tab 2', content: 'Content 2' }
      ],
      counter: 2
    }
  },
  methods: {
    addTab() {
      this.tabs.push({
        title: `Tab ${++this.counter}`,
        content: `Content ${this.counter}`
      })
      this.activeTab = this.tabs.length - 1
    },
    removeTab(index) {
      this.tabs.splice(index, 1)
      if (this.activeTab >= index) {
        this.activeTab = Math.max(0, this.activeTab - 1)
      }
    }
  }
}
</script>

使用第三方库

使用成熟的UI库如Element UI或Ant Design Vue快速实现Tabs。

<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>
import { ElTabs, ElTabPane } from 'element-plus'

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

路由集成

将Tabs与Vue Router集成，实现基于路由的Tab切换。

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

const router = new VueRouter({
  routes
})

new Vue({
  router,
  template: `
    <div>
      <router-link to="/tab1" active-class="active">Tab 1</router-link>
      <router-link to="/tab2" active-class="active">Tab 2</router-link>
      <router-view></router-view>
    </div>
  `
})