Vue 中如何实现 tab 组件及多标签页？
- WBOY原创
- 2023-06-25 09:33:282953浏览
随着前端技术的不断更新，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 组件及多标签页？的详细内容。更多信息请关注PHP中文网其他相关文章！