vue实现多标签页

Vue 实现多标签页的方法

使用 Vue Router 和动态组件

通过 Vue Router 的路由配置和动态组件可以实现多标签页功能。在路由配置中为每个标签页定义独立的路径和组件，动态加载组件实现标签切换。

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

<template>
  <div>
    <div class="tabs">
      <router-link to="/tab1">Tab 1</router-link>
      <router-link to="/tab2">Tab 2</router-link>
      <router-link to="/tab3">Tab 3</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

使用 v-show 控制显示

通过 v-show 指令可以控制多个标签页的显示与隐藏，适合简单的标签页场景。

<template>
  <div>
    <div class="tabs">
      <button @click="currentTab = 'tab1'">Tab 1</button>
      <button @click="currentTab = 'tab2'">Tab 2</button>
      <button @click="currentTab = 'tab3'">Tab 3</button>
    </div>
    <div v-show="currentTab === 'tab1'">Tab 1 Content</div>
    <div v-show="currentTab === 'tab2'">Tab 2 Content</div>
    <div v-show="currentTab === 'tab3'">Tab 3 Content</div>
  </div>
</template>

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

使用第三方组件库

Element UI 和 Ant Design Vue 等组件库提供了现成的标签页组件，可以快速实现多标签页功能。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab1">Tab 1 Content</el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">Tab 2 Content</el-tab-pane>
    <el-tab-pane label="Tab 3" name="tab3">Tab 3 Content</el-tab-pane>
  </el-tabs>
</template>

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

动态添加和关闭标签页

通过维护一个标签页数组，可以实现动态添加和关闭标签页的功能。

<template>
  <div>
    <div class="tabs">
      <button v-for="tab in tabs" :key="tab.id" @click="selectTab(tab.id)">
        {{ tab.name }}
        <span @click.stop="closeTab(tab.id)">×</span>
      </button>
      <button @click="addTab">+</button>
    </div>
    <div v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">
      {{ tab.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { id: 1, name: 'Tab 1', content: 'Tab 1 Content' }
      ],
      activeTab: 1,
      nextId: 2
    }
  },
  methods: {
    addTab() {
      this.tabs.push({
        id: this.nextId,
        name: `Tab ${this.nextId}`,
        content: `Tab ${this.nextId} Content`
      })
      this.activeTab = this.nextId
      this.nextId++
    },
    selectTab(id) {
      this.activeTab = id
    },
    closeTab(id) {
      const index = this.tabs.findIndex(tab => tab.id === id)
      if (index !== -1) {
        this.tabs.splice(index, 1)
        if (this.activeTab === id) {
          this.activeTab = this.tabs.length ? this.tabs[0].id : null
        }
      }
    }
  }
}
</script>

使用 Vuex 管理标签页状态

在大型应用中，可以使用 Vuex 集中管理标签页的状态，实现跨组件共享。

// store.js
export default new Vuex.Store({
  state: {
    tabs: [
      { id: 1, name: 'Tab 1', content: 'Tab 1 Content' }
    ],
    activeTab: 1
  },
  mutations: {
    addTab(state, tab) {
      state.tabs.push(tab)
      state.activeTab = tab.id
    },
    selectTab(state, id) {
      state.activeTab = id
    },
    closeTab(state, id) {
      const index = state.tabs.findIndex(tab => tab.id === id)
      if (index !== -1) {
        state.tabs.splice(index, 1)
        if (state.activeTab === id) {
          state.activeTab = state.tabs.length ? state.tabs[0].id : null
        }
      }
    }
  }
})

<template>
  <div>
    <div class="tabs">
      <button v-for="tab in tabs" :key="tab.id" @click="selectTab(tab.id)">
        {{ tab.name }}
        <span @click.stop="closeTab(tab.id)">×</span>
      </button>
      <button @click="addTab">+</button>
    </div>
    <div v-for="tab in tabs" :key="tab.id" v-show="activeTab === tab.id">
      {{ tab.content }}
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['tabs', 'activeTab'])
  },
  methods: {
    ...mapMutations(['addTab', 'selectTab', 'closeTab']),
    addTab() {
      const newTab = {
        id: this.tabs.length + 1,
        name: `Tab ${this.tabs.length + 1}`,
        content: `Tab ${this.tabs.length + 1} Content`
      }
      this.$store.commit('addTab', newTab)
    }
  }
}
</script>