NUR

主题

Tabs 标签页 ​

分隔内容上有关联但属于不同类别的数据集合。

基础用法 ​

这是标签一的内容
vue
<my-tabs v-model="activeTab">
  <my-tab-pane name="tab1" label="标签一">内容一</my-tab-pane>
  <my-tab-pane name="tab2" label="标签二">内容二</my-tab-pane>
  <my-tab-pane name="tab3" label="标签三">内容三</my-tab-pane>
</my-tabs>

垂直布局 ​

position="left" 或 position="right" 将标签页切换栏放到左侧或右侧。

左侧标签一的内容
vue
<my-tabs v-model="activeTab" position="left">
  <my-tab-pane name="tab1" label="标签一">内容一</my-tab-pane>
  <my-tab-pane name="tab2" label="标签二">内容二</my-tab-pane>
</my-tabs>

溢出 ​

当标签数量过多时，导航区域可以横向滚动。

标签1的内容
vue
<my-tabs v-model="activeTab">
  <my-tab-pane v-for="t in tabs" :key="t.name" :name="t.name" :label="t.label">
    {{ t.label }}的内容
  </my-tab-pane>
</my-tabs>

禁用 Tab ​

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

这是可用的标签内容
vue
<my-tabs v-model="activeTab">
  <my-tab-pane name="tab1" label="可用">内容</my-tab-pane>
  <my-tab-pane name="tab2" label="禁用" disabled>内容</my-tab-pane>
</my-tabs>

带分割线 ​

通过 divided 属性在标签之间添加分割线。

vue
<my-tabs v-model="activeTab">
  <my-tab-pane name="tab1" label="首页" />
  <my-tab-pane name="tab2" label="作品" divided />
  <my-tab-pane name="tab3" label="关于" divided />
</my-tabs>

自定义样式 ​

通过 #label 插槽自定义标签内容。

消息内容
vue
<my-tabs v-model="activeTab">
  <my-tab-pane name="tab1">
    <template #label>
      <span>🔔 消息 <span class="badge">3</span></span>
    </template>
    消息内容
  </my-tab-pane>
</my-tabs>

圆形按钮组 ​

标签栏自带圆角背景，active 项有白色背景和阴影。

全部内容
vue
<my-tabs v-model="activeTab">
  <my-tab-pane name="tab1" label="全部" />
  <my-tab-pane name="tab2" label="进行中" />
  <my-tab-pane name="tab3" label="已完成" />
</my-tabs>

圆形按钮组（垂直） ​

圆形标签栏配合 position="left" 实现垂直按钮组。

项目概览
vue
<my-tabs v-model="activeTab" position="left">
  <my-tab-pane name="tab1" label="概览">内容</my-tab-pane>
  <my-tab-pane name="tab2" label="成员">内容</my-tab-pane>
</my-tabs>

自定义渲染函数 ​

通过 #label 插槽配合 h() 渲染函数实现完全自定义的标签样式。

在线状态内容
vue
<my-tabs v-model="activeTab">
  <my-tab-pane name="tab1">
    <template #label>
      <span style="display:flex;align-items:center;gap:6px">
        <span class="dot" style="background:green"></span>
        在线
      </span>
    </template>
    内容
  </my-tab-pane>
</my-tabs>

组件结构 ​

<div> 根元素根据 position 属性排列导航栏（my-tabs__nav-wrap + 标签按钮列表）和内容面板（<slot />）。标签按钮由子组件 <my-tab-pane> 注册生成，内容面板通过 v-show 控制显隐。

CSS 类名 ​

类名说明
.my-tabs根元素
.my-tabs--top顶部标签栏
.my-tabs--bottom底部标签栏
.my-tabs--left左侧标签栏
.my-tabs--right右侧标签栏
.my-tabs__nav-wrap导航包裹层（含滚动）
.my-tabs__nav导航栏
.my-tabs__nav--v垂直导航栏
.my-tabs__tab标签按钮
.is-active激活状态
.is-disabled禁用状态
.is-divided分割线样式
.my-tabs__content内容区域
.my-tab-pane标签面板

API ​

Tabs Props ​

属性说明类型默认值
modelValue当前激活的标签名 (v-model)string—
position标签栏位置'top' | 'bottom' | 'left' | 'right''top'

Tabs Events ​

事件说明回调
update:modelValuev-model 更新(name: string)
tab-click标签点击(name: string)

TabPane Props ​

属性说明类型默认值
name标签标识（必填）string—
label标签文字string—
disabled禁用booleanfalse
divided左侧分割线booleanfalse

TabPane Slots ​

名称说明作用域
default标签面板内容—
label自定义标签内容{ tab }