当前位置：首页 > 文章列表 > 文章 > 前端 > Vue 中如何实现 tab 组件及多标签页？

Vue 中如何实现 tab 组件及多标签页？

2024-03-30 09:05:35 0浏览收藏

一分耕耘，一分收获！既然都打开这篇《Vue 中如何实现 tab 组件及多标签页？》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

随着前端技术的不断更新，Vue 作为一款流行的前端框架，已经成为很多开发者的首选。在实际项目中，常常需要使用 tab 组件以及多标签页来实现不同功能模块的切换和管理。在本文中，我们将介绍如何利用 Vue 实现一个简单的 tab 组件以及多标签页。

一、实现一个简单的 tab 组件

创建 Tab.vue 组件

在项目中创建一个 Tab.vue 的组件，用于显示 tab 列表和当前选中的 tab 页的内容。

<template>
  <div>
    <div class="tab-header">
      <div class="tab-item" 
           v-for="(tab, index) in tabs" 
           :key="index"
           :class="{ active: index === currentIndex }" 
           @click="handleTab(index)">
        {{ tab.title }}
      </div>
    </div>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tab',
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    handleTab(index) {
      this.$emit('tabchange', index);
    },
  },
};
</script>

在该组件中，我们通过使用 v-for 指令来遍历传入的 tabs 数组，将每个 tab 的标题渲染为一个 tab-item。选中的 tab 页的 currentIndex 会在 tab-item 上添加 active class，以便高亮显示当前选中的 tab 页。tab 组件自带 slot 插槽，用于显示 tab 页内容。

在父组件中使用 Tab 组件

在需要使用 tab 组件的页面上，将 Tab 组件导入后在 template 中进行使用，将需要展示的 tab 页作为 tabs 数组的成员传入至 Tab 组件中，并通过 currentIndex 属性指定当前选中的 tab 页的下标。此外，在 Tab 组件中监听 tabchange 事件，以便在父组件中更改 currentIndex 的值来控制当前选中的 tab 页。

<template>
  <div>
    <Tab :tabs="tabs" :currentIndex="currentIndex" @tabchange="handleChange">
      <div v-for="(tab, index) in tabs" :key="index">
        {{ tab.content }}
      </div>
    </Tab>
  </div>
</template>

<script>
import Tab from './Tab.vue';

export default {
  name: 'App',
  components: {
    Tab,
  },
  data() {
    return {
      currentIndex: 0,
      tabs: [
        {
          title: 'tab1',
          content: '这是第一个 tab 页的内容',
        },
        {
          title: 'tab2',
          content: '这是第二个 tab 页的内容',
        },
      ],
    };
  },
  methods: {
    handleChange(index) {
      this.currentIndex = index;
    },
  },
};
</script>

在该父组件中，我们首先需要导入 Tab 组件，然后创建 tabs 数组，用于存储每个 tab 页的标题和内容。在 template 中需要传入 tabs 和 currentIndex 两个属性，分别用于初始化 Tab 组件。在 handleChange 方法中，我们监听了 tabchange 事件，从而可以在父组件中更新 currentIndex 的值，来实现选中不同的 tab 页。

二、实现多标签页组件

创建页面布局及路由配置

在项目中创建一个具有多标签页功能的页面，首先需要考虑页面的布局。在本文中，我们使用了 Element UI 的 Layout 布局组件来搭建页面基础结构，然后通过 Vue Router 来完成路由配置。在多标签页场景下，每个 tab 页可视为一个路由页面，因此需要在路由表中添加相应路由信息。

<template>
  <div class="page-container">
    <el-container>
      <el-header>
        <h1>{{ pageTitle }}</h1>
      </el-header>
      <el-container>
        <el-aside style="width: 200px; height: 100%">
          <el-menu
            :default-active="activeMenu"
            @select="handleSelect"
            unique-opened
            :collapse="isCollapse">
            <el-submenu v-for="menuGroup in menuList" :key="menuGroup.name" :index="menuGroup.name">
              <template slot="title">
                <i :class="menuGroup.icon"></i>
                <span>{{ menuGroup.title }}</span>
              </template>
              <el-menu-item v-for="menuItem in menuGroup.children" :key="menuItem.path" :index="menuItem.path">
                <i :class="menuItem.icon"></i>
                <span slot="title">{{ menuItem.title }}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'PageLayout',
  data() {
    return {
      pageTitle: '多标签页示例',
      menuList: [
        {
          name: 'group1',
          title: '分组 1',
          icon: 'el-icon-s-home',
          children: [
            {
              title: '页面 1',
              path: '/page1',
              icon: 'el-icon-s-order',
            },
            {
              title: '页面 2',
              path: '/page2',
              icon: 'el-icon-s-data',
            },
          ],
        },
        {
          name: 'group2',
          title: '分组 2',
          icon: 'el-icon-s-management',
          children: [
            {
              title: '页面 3',
              path: '/page3',
              icon: 'el-icon-s-flag',
            },
            {
              title: '页面 4',
              path: '/page4',
              icon: 'el-icon-menu',
            },
          ],
        },
      ],
      activeMenu: '',
      isCollapse: false,
    };
  },
  methods: {
    handleSelect(index) {
      this.activeMenu = index;
      this.$router.push(index);
    },
  },
};
</script>

在父组件 PageLayout.vue 中，我们首先设置了页面标题 pageTitle、菜单列表 menuList 和两个状态值 activeMenu 和 isCollapse，用于菜单的展开与关闭。然后利用 Element UI 的 Layout 组件搭建了页面的基本结构，左侧为菜单栏，右侧为标签页内容。在菜单组件 el-menu 中，我们通过 v-for 循环渲染了菜单分组和菜单项，其中菜单项绑定了对应的路由 path，点击菜单项后会触发 handleSelect 方法，将路由 path 传入 $router.push 方法中跳转至相应页面。在该组件中我们需要使用 router-view 去展示对应的路由组件。

实现 Tab 组件及多标签页功能

在完成页面布局和路由配置后，我们需要在页面中实现 tab 组件及多标签页功能，并书写对应的 js 代码。在多标签页功能中，首先需要实现标签栏组件 TabBar.vue，用于展示各个标签页的标题和控制标签页的添加、删除等操作。

<template>
  <div class="tab-bar" :class="{ fixed: isFixed }">
    <div class="tab-bar-content">
      <div v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentIndex === index }" @click="handleChange(index)">
        {{ tab.title }}
        <i class="el-icon-close" @click.stop="handleRemoveTab(index)"></i>
      </div>
      <i class="el-icon-circle-plus add-tab-btn" @click.stop="handleAddTab"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabBar',
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
    isFixed: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleChange(index) {
      this.$emit('tabchange', index);
    },
    handleAddTab() {
      this.$emit('addtab');
    },
    handleRemoveTab(index) {
      this.$emit('removetab', index);
    },
  },
};
</script>

在该组件中，我们通过使用 v-for 循环渲染传入的 tabs 数组，将每个 tab 的标题渲染为一个 tab-item。选中的 tab 页会在 tab-item 上添加 active class，以便高亮显示当前选中的 tab 页。tab-bar 组件自带三个事件：tabchange 用于监听 tab 切换事件，addtab 和 removetab 用于监听 tab 添加和删除事件，以便在父组件中更新 tabs 数组的值。

在父组件 PageLayout.vue 中，我们需要在页面结构下方添加 TabBar 组件，并为其传入 tabs 和 currentIndex 属性，然后在对应事件方法中对 tabs 数组进行更新操作，以便操作对应的标签页。

<template>
  <div class="page-container">
    ...
    <el-main>
      <tab-bar :tabs="tabs" :currentIndex="currentIndex" :isFixed="isFixed" @tabchange="handleChange" @addtab="handleAddTab" @removetab="handleRemoveTab"/>
      <router-view v-if="$route.meta.keepAlive"/>
      <keep-alive>
        <router-view v-if="!$route.meta.keepAlive"/>
      </keep-alive>
    </el-main>
  </div>
</template>

<script>
import TabBar from '../components/TabBar.vue';

export default {
  name: 'PageLayout',
  components: {
    TabBar,
  },
  data() {
    return {
      tabs: [
        {
          title: '首页',
          path: '/',
        },
      ],
      currentIndex: 0,
      isFixed: false,
    };
  },
  created() {
    this.$router.afterEach((to, from) => {
      const index = this.tabs.findIndex(tab => tab.path === to.path);
      if (index !== -1) {
        this.currentIndex = index;
        this.isFixed = false;
      } else {
        this.addTab(to);
      }
    });
  },
  methods: {
    handleChange(index) {
      this.$router.push(this.tabs[index].path);
    },
    handleAddTab() {
      const isExist = this.tabs.find(tab => tab.path === this.$route.path);
      if (!isExist) {
        this.tabs.push({
          title: this.$route.meta.title || '',
          path: this.$route.path,
        });
        this.currentIndex = this.tabs.length - 1;
        this.isFixed = false;
      } else {
        this.currentIndex = this.tabs.indexOf(isExist);
        this.isFixed = false;
      }
      this.$router.push(this.$route.path);
    },
    handleRemoveTab(index) {
      const targetTab = this.tabs[index];
      const targetPath = targetTab.path;
      this.tabs.splice(index, 1);
      if (targetPath === this.$route.path) {
        const lastIndex = this.tabs.length - 1;
        const lastTab = this.tabs[lastIndex];
        this.currentIndex = lastIndex;
        this.$router.push(lastTab.path);
      } else {
        this.currentIndex = this.tabs.findIndex(tab => tab.path === this.$route.path);
      }
    },
  },
};
</script>

在 PageLayout.vue 中，我们首先创建了 tabs 数组，用于存储各个标签页的路由信息。在 created 钩子函数中，我们监听了当前路由的变化，并在 tabs 数组中查找对应的标签页路由。如果存在，则直接定位到对应的标签页，否则将当前路由添加为一个新的标签页。在 handleAddTab 方法中，如果当前路由对应的标签页已存在，则直接选中已有标签页，否则在 tabs 数组中加入一个新的标签页。在 handleRemoveTab 方法中，我们利用数组的 splice 方法对已有标签页进行删除操作，并在 tabs 数组中定位到当前选中的标签页，并更新 currentIndex 和 $router 的跳转信息。

三、总结

在本文中，我们介绍了如何利用 Vue 框架及相关插件实现 tab 组件及多标签页功能。实际实现过程中，需要根据具体场景对组件或代码进行灵活调整，以便更好地适配实际项目需求。总的来说，tab 组件和多标签页功能可以为项目提供更好的可用性和用户体验，更好的解决前端页面的架构问题。

今天关于《Vue 中如何实现 tab 组件及多标签页？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

VUE tab 多标签页