Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合，适合游戏设置、角色信息、装备管理等场景。

基础用法

最基础的标签页用法，适合展示不同类别的游戏信息。

游戏概览

这里展示游戏的基本信息、最新动态和推荐内容。

角色管理

查看和管理你的游戏角色，包括等级、技能和装备。

成就系统

查看已解锁的成就和进度，挑战更多成就获得奖励。

<script setup>
import { ref } from 'vue';

const activeTab = ref('overview');
</script>

<template>
  <ExTabs v-model="activeTab">
    <ExTabPane name="overview" label="游戏概览">
      <p>游戏概览内容</p>
    </ExTabPane>
    <ExTabPane name="characters" label="角色">
      <p>角色管理内容</p>
    </ExTabPane>
    <ExTabPane name="achievements" label="成就">
      <p>成就系统内容</p>
    </ExTabPane>
  </ExTabs>
</template>

卡片类型

使用 type="card" 可以渲染卡片风格的标签页。

850

总胜场

68%

胜率

3.2

KD比

最近10场比赛记录

全服排行榜

<template>
  <ExTabs v-model="activeTab" type="card">
    <ExTabPane name="stats" label="数据统计">
      <p>数据统计内容</p>
    </ExTabPane>
    <ExTabPane name="history" label="历史记录">
      <p>历史记录内容</p>
    </ExTabPane>
    <ExTabPane name="ranking" label="排行榜">
      <p>排行榜内容</p>
    </ExTabPane>
  </ExTabs>
</template>

按钮类型

使用 type="button" 可以渲染按钮风格的标签页，带有霓虹发光效果。

武器库

查看和管理你的武器装备，升级武器提升战斗力。

护甲库

查看和管理你的护甲装备，提升防御能力。

配件库

查看和管理你的配件装备，获得特殊能力。

<template>
  <ExTabs v-model="activeTab" type="button">
    <ExTabPane name="weapons" label="武器">
      <p>武器库内容</p>
    </ExTabPane>
    <ExTabPane name="armor" label="护甲">
      <p>护甲库内容</p>
    </ExTabPane>
    <ExTabPane name="accessories" label="配件">
      <p>配件库内容</p>
    </ExTabPane>
  </ExTabs>
</template>

不同尺寸

通过 size 属性可以设置不同的标签页尺寸。

小尺寸

小尺寸标签页内容

关于内容

中等尺寸（默认）

中等尺寸标签页内容

关于内容

大尺寸

大尺寸标签页内容

关于内容

<template>
  <ExTabs v-model="activeTab" size="small">
    <ExTabPane name="settings" label="设置">
      <p>小尺寸内容</p>
    </ExTabPane>
  </ExTabs>

  <ExTabs v-model="activeTab" size="large">
    <ExTabPane name="settings" label="设置">
      <p>大尺寸内容</p>
    </ExTabPane>
  </ExTabs>
</template>

带图标

通过具名插槽可以为标签页添加图标。

游戏概览内容

角色管理内容

成就系统内容

<template>
  <ExTabs v-model="activeTab">
    <template #icon-overview>
      <ExIcon icon="dashboard-line" :size="18" />
    </template>
    <template #icon-characters>
      <ExIcon icon="user-line" :size="18" />
    </template>

    <ExTabPane name="overview" label="概览">
      <p>概览内容</p>
    </ExTabPane>
    <ExTabPane name="characters" label="角色">
      <p>角色内容</p>
    </ExTabPane>
  </ExTabs>
</template>

禁用状态

通过 disabled 属性可以禁用某个标签页。

游戏概览内容

角色管理内容（已禁用）

成就系统内容

<template>
  <ExTabs v-model="activeTab">
    <ExTabPane name="overview" label="游戏概览">
      <p>游戏概览内容</p>
    </ExTabPane>
    <ExTabPane name="characters" label="角色" disabled>
      <p>角色管理内容（已禁用）</p>
    </ExTabPane>
    <ExTabPane name="achievements" label="成就">
      <p>成就系统内容</p>
    </ExTabPane>
  </ExTabs>
</template>

可关闭

通过 closable 属性可以让标签页可关闭。

这是 tab1 的内容

这是 tab2 的内容

这是 tab3 的内容

<script setup>
import { ref } from 'vue';

const editableTabs = ref(['tab1', 'tab2', 'tab3']);
const editableTabsValue = ref('tab1');

const handleTabRemove = targetName => {
  const tabs = editableTabs.value;
  let activeName = editableTabsValue.value;
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          activeName = nextTab;
        }
      }
    });
  }
  editableTabsValue.value = activeName;
  editableTabs.value = tabs.filter(tab => tab !== targetName);
};
</script>

<template>
  <ExTabs v-model="editableTabsValue" closable @tab-remove="handleTabRemove">
    <ExTabPane v-for="item in editableTabs" :key="item" :name="item" :label="`标签 ${item}`">
      <p>这是 {{ item }} 的内容</p>
    </ExTabPane>
  </ExTabs>
</template>

可添加

通过 addable 属性可以让标签页可添加。

这是 tab1 的内容

这是 tab2 的内容

这是 tab3 的内容

<script setup>
import { ref } from 'vue';

const editableTabs = ref(['tab1', 'tab2', 'tab3']);
const editableTabsValue = ref('tab1');
const tabIndex = ref(3);

const handleTabAdd = () => {
  const newTabName = `tab${++tabIndex.value}`;
  editableTabs.value.push(newTabName);
  editableTabsValue.value = newTabName;
};
</script>

<template>
  <ExTabs v-model="editableTabsValue" addable @tab-add="handleTabAdd">
    <ExTabPane v-for="item in editableTabs" :key="item" :name="item" :label="`标签 ${item}`">
      <p>这是 {{ item }} 的内容</p>
    </ExTabPane>
  </ExTabs>
</template>

可编辑（增删一体）

使用 editable 属性可一次性启用「添加 + 关闭」，无需分别设置 addable 与 closable。

这是 tab1 的内容，可点击标签上的 ✕ 关闭，或点击 ＋ 新增。

这是 tab2 的内容，可点击标签上的 ✕ 关闭，或点击 ＋ 新增。

这是 tab3 的内容，可点击标签上的 ✕ 关闭，或点击 ＋ 新增。

<script setup>
import { ref } from 'vue';

const editableTabs = ref(['tab1', 'tab2', 'tab3']);
const editableTabsValue = ref('tab1');
const tabIndex = ref(3);

const handleTabAdd = () => {
  const newTabName = `tab${++tabIndex.value}`;
  editableTabs.value.push(newTabName);
  editableTabsValue.value = newTabName;
};

const handleTabRemove = targetName => {
  const tabs = editableTabs.value;
  let activeName = editableTabsValue.value;
  if (activeName === targetName) {
    const idx = tabs.findIndex(t => t === targetName);
    const nextTab = tabs[idx + 1] || tabs[idx - 1];
    if (nextTab) activeName = nextTab;
  }
  editableTabsValue.value = activeName;
  editableTabs.value = tabs.filter(tab => tab !== targetName);
};
</script>

<template>
  <ExTabs
    v-model="editableTabsValue"
    editable
    type="card"
    @tab-add="handleTabAdd"
    @tab-remove="handleTabRemove"
  >
    <ExTabPane v-for="item in editableTabs" :key="item" :name="item" :label="`标签 ${item}`">
      <p>这是 {{ item }} 的内容</p>
    </ExTabPane>
  </ExTabs>
</template>

设置示例

展示完整的设置界面，使用标签页组织不同类别的设置。

画质超高

帧率限制144 FPS

分辨率2560x1440

垂直同步开启

主音量80%

音效音量70%

背景音乐60%

键盘和鼠标控制设置，自定义按键绑定。

网络连接设置，服务器选择和延迟优化。

<template>
  <ExTabs v-model="activeTab" type="card">
    <template #icon-settings>
      <ExIcon icon="settings-3-line" :size="18" />
    </template>

    <ExTabPane name="settings" label="图形设置">
      <div>图形设置内容</div>
    </ExTabPane>

    <ExTabPane name="audio" label="音频设置">
      <div>音频设置内容</div>
    </ExTabPane>
  </ExTabs>
</template>

API

Tabs Props

属性	说明	类型	默认值
model-value / v-model	当前激活的标签页名称	string | number	undefined
type	标签页类型	'line' | 'card' | 'button'	'line'
position	标签页位置	'top' | 'right' | 'bottom' | 'left'	'top'
size	标签页尺寸	'small' | 'medium' | 'large'	'medium'
closable	是否可关闭	boolean	false
addable	是否可添加	boolean	false
editable	是否可编辑（可添加和关闭）	boolean	false
animated	是否动画	boolean	true

Tabs Events

事件名	说明	类型
update:model-value	更新当前激活的标签页	(value: string | number) => void
change	标签页切换事件	(name: string | number) => void
tab-click	标签页点击事件	(name: string | number, event: MouseEvent) => void
tab-remove	标签页关闭事件	(name: string | number) => void
tab-add	标签页添加事件	() => void

Tabs Slots

插槽名	说明
default	标签页面板内容
icon-{name}	自定义标签页图标
label-{name}	自定义标签页标题

Tabs Methods

方法名	说明	类型
getElement	获取标签页DOM元素	() => HTMLDivElement | null

TabPane Props

属性	说明	类型	默认值
name	标签页名称（唯一标识）	string | number	-
label	标签页标题	string	undefined
disabled	是否禁用	boolean	false
closable	是否可关闭	boolean	false
lazy	是否懒加载	boolean	false

TabPane Slots

插槽名	说明
default	标签页面板内容

TabPane Methods

方法名	说明	类型
getElement	获取面板DOM元素	() => HTMLDivElement | null

无障碍支持

• 使用语义化的 HTML 标签
• 完整的 ARIA 属性支持
• 支持键盘导航（Enter、Space 键切换）
• 支持屏幕阅读器
• 支持减少动画偏好设置

主题定制

标签页跟随 ExUI 全局主题（ConfigProvider / 全局 --ex-color-* 变量）自动适配，无需单独配置。