witTabs 标签页组件

witTabs是一个基于 Element Plus 封装的标签页组件，用于管理已访问的路由页面，支持多种样式主题、标签操作和右键菜单功能，与路由系统深度集成，提供流畅的页面切换体验。

用法实列

<template>
  <div>
    <!-- 基础用法 -->
    <witTabs />
    
    <!-- 指定布局 -->
    <witTabs layout="vertical" />
  </div>
</template>

<script lang="ts" setup>
// 无需额外配置，组件自动与路由系统集成
</script>

API

组件

属性名	类型	默认值	描述
layout	[String]	''	布局类型，用于适配不同的页面布局

事件

组件通过路由系统和状态管理进行交互，不直接暴露事件接口。

功能特性

1. 路由集成

• 自动跟踪用户访问的路由页面
• 支持路由参数变化时的标签管理
• 页面刷新时自动恢复标签状态

2. 标签操作

• 点击切换：点击标签可快速切换到对应的路由页面
• 关闭标签：支持关闭单个标签页（固定标签除外）
• 右键菜单：提供丰富的右键菜单操作：
  • 刷新当前标签
  • 关闭其他标签
  • 关闭左侧标签
  • 关闭右侧标签
  • 关闭全部标签

3. 多种样式主题

组件支持四种标签栏样式，通过全局配置theme.tabsBarStyle控制：

• card：卡片式标签
• smart：智能式标签
• smooth：平滑式标签
• rect：矩形标签

4. 固定标签

通过路由配置meta.noClosable: true可设置固定标签，用户无法关闭。

5. 下拉菜单

当标签数量过多时，提供下拉菜单快速访问所有标签。

标签管理逻辑

1. 初始化：组件挂载时自动添加所有配置为noClosable的路由标签
2. 路由监听：监听路由变化，自动添加新访问的路由标签
3. 标签切换：点击标签时，如果不是当前激活路由则进行跳转
4. 标签关闭：
   • 关闭当前标签时，自动跳转到最后访问的标签
   • 关闭其他标签时，保留当前标签和固定标签
5. 页面刷新：监听页面卸载事件，保存标签状态，页面重新加载时恢复

样式结构

组件采用Flex布局，主要包含以下部分：

• wit-tabs：主容器
• wit-tabs-content：标签内容区域
• wit-tabs-more：更多标签下拉按钮
• contextmenu：右键菜单

不同样式主题通过wit-tabs-content-{style}类名进行区分，实现不同的视觉效果。

TIP

1. 组件与Vue Router深度集成，无需手动管理标签数据
2. 标签栏样式可通过全局配置settingsStore.theme.tabsBarStyle进行修改
3. 固定标签需在路由配置中设置meta.noClosable: true
4. 组件提供了丰富的标签操作功能，提升用户体验
5. 支持通过右键菜单进行快速标签管理操作