vue标签页实现

Vue 标签页实现方法

使用动态组件和<component>标签

在Vue中可以通过动态组件实现标签页切换。需要定义多个组件，并通过<component>标签动态渲染当前选中的组件。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = tab"
        :class="{ active: currentTab === tab }"
      >
        {{ tab }}
      </button>
    </div>
    <component :is="currentTabComponent" class="tab-content"></component>
  </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 {
      tabs: ['Tab1', 'Tab2', 'Tab3'],
      currentTab: 'Tab1'
    }
  },
  computed: {
    currentTabComponent() {
      return this.currentTab
    }
  }
}
</script>

<style>
.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.tabs button {
  padding: 8px 16px;
  background: #eee;
  border: none;
  cursor: pointer;
}
.tabs button.active {
  background: #ddd;
  font-weight: bold;
}
.tab-content {
  border: 1px solid #ddd;
  padding: 20px;
}
</style>

使用Vue Router实现标签页

对于更复杂的应用，可以使用Vue Router实现标签页导航，每个标签对应一个路由。

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Tab1 from './views/Tab1.vue'
import Tab2 from './views/Tab2.vue'
import Tab3 from './views/Tab3.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

// App.vue
<template>
  <div>
    <nav>
      <router-link to="/tab1">Tab1</router-link>
      <router-link to="/tab2">Tab2</router-link>
      <router-link to="/tab3">Tab3</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

使用第三方UI库

许多Vue UI库提供了现成的标签页组件，如Element UI、Vuetify等。

// 使用Element UI的el-tabs
<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="用户管理" name="user">
      用户管理内容
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="config">
      配置管理内容
    </el-tab-pane>
  </el-tabs>
</template>

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

实现可关闭的标签页

对于需要支持关闭功能的标签页，可以维护一个标签数组，动态添加和移除。

<template>
  <div>
    <div class="tabs">
      <div 
        v-for="(tab, index) in tabs"
        :key="index"
        @click="selectTab(index)"
        :class="{ active: currentTabIndex === index }"
      >
        {{ tab.title }}
        <span @click.stop="closeTab(index)">×</span>
      </div>
      <button @click="addTab">+</button>
    </div>
    <div class="tab-content">
      {{ tabs[currentTabIndex]?.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: 'Tab 1', content: 'Content for tab 1' },
        { title: 'Tab 2', content: 'Content for tab 2' }
      ],
      currentTabIndex: 0
    }
  },
  methods: {
    selectTab(index) {
      this.currentTabIndex = index
    },
    closeTab(index) {
      this.tabs.splice(index, 1)
      if (this.currentTabIndex >= index && this.currentTabIndex > 0) {
        this.currentTabIndex--
      }
    },
    addTab() {
      const newTabNumber = this.tabs.length + 1
      this.tabs.push({
        title: `Tab ${newTabNumber}`,
        content: `Content for tab ${newTabNumber}`
      })
      this.currentTabIndex = this.tabs.length - 1
    }
  }
}
</script>

保持标签页状态

使用<keep-alive>可以缓存不活动的组件实例，避免重新渲染。

<template>
  <keep-alive>
    <component :is="currentTabComponent"></component>
  </keep-alive>
</template>