Tabs 标签页

选项卡切换组件。 基于 Antd 二次封装，仅按 UI 规范调整样式，未做逻辑差异调整，详见Antd。

何时使用

提供平级的区域将大块内容进行收纳和展现，保持界面整洁。 Ant Design 依次提供了三级选项卡，分别用于不同的场景。

• 卡片式的页签，提供可关闭的样式，常用于容器顶部。
• 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
• RadioButton 可作为更次级的页签来使用。

代码演示

基本标签页

<template>
  <f-tabs v-model:activeKey="activeKey">
    <f-tab-pane key="1" tab="标签 1">标签内容 1</f-tab-pane>
    <f-tab-pane key="2" tab="标签 2">标签内容 2</f-tab-pane>
    <f-tab-pane key="3" tab="标签 3" disabled>标签内容 3</f-tab-pane>
  </f-tabs>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const activeKey = ref('1')
</script>

带图标标签页

<template>
  <f-tabs v-model:activeKey="activeKey">
    <f-tab-pane key="1">
      <template #tab>
        <span> <AppleOutlined />标签 1 </span>
      </template>
      标签内容 1
    </f-tab-pane>
    <f-tab-pane key="2">
      <template #tab>
        <span> <AppleOutlined />标签 2 </span>
      </template>
      标签内容 2
    </f-tab-pane>
    <f-tab-pane key="4" disabled>
      <template #tab>
        <span> <AppleOutlined />标签 4 </span>
      </template>
      标签内容 4
    </f-tab-pane>
  </f-tabs>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { AppleOutlined } from '@ant-design/icons-vue'

const activeKey = ref('1')
</script>

特殊标签页(新)

<template>
  <f-tabs v-model:activeKey="activeKey" special>
    <f-tab-pane key="1" tab="标签 1">标签内容 1</f-tab-pane>
    <f-tab-pane key="2" tab="标签 2">标签内容 2</f-tab-pane>
    <f-tab-pane key="3" tab="标签 3" disabled>标签内容 3</f-tab-pane>
  </f-tabs>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const activeKey = ref('1')
</script>

标准卡片式用法

<template>
  <f-tabs v-model:activeKey="activeKey" type="card">
    <f-tab-pane key="1" tab="标签 1">标签内容 1</f-tab-pane>
    <f-tab-pane key="2" tab="标签 2">标签内容 2</f-tab-pane>
    <f-tab-pane key="3" tab="标签 3">标签内容 3</f-tab-pane>
  </f-tabs>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const activeKey = ref('1')
</script>

边框卡片式用法(新)

边框选项卡

<template>
  <p>边框选项卡</p>
  <f-tabs v-model:activeKey="activeKey" type="border-card">
    <f-tab-pane key="1" tab="标签 1">标签内容 1</f-tab-pane>
    <f-tab-pane key="2" tab="标签 2">标签内容 2</f-tab-pane>
    <f-tab-pane key="3" tab="标签 3" disabled>标签内容 3</f-tab-pane>
  </f-tabs>
  <br />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const activeKey = ref('1')
</script>

将囊用法(新)

<template>
  <f-tabs v-model:activeKey="activeKey" type="capsule-card">
    <f-tab-pane key="1" tab="标签 1">标签内容 1</f-tab-pane>
    <f-tab-pane key="2" tab="标签 2">标签内容 2</f-tab-pane>
    <f-tab-pane key="3" tab="标签 3" disabled>标签内容 3</f-tab-pane>
  </f-tabs>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const activeKey = ref('1')
</script>

API

Tabs

参数	说明	类型	默认值	版本
activeKey(v-model)	当前激活 tab 面板的 key	string	无
animated	是否使用动画切换 Tabs，在 tabPosition="top" | "bottom" 时有效	boolean | {inkBar:boolean, tabPane:boolean}	true, 当 type="card" 时为 false
centered	标签居中展示	boolean	false	3.0
destroyInactiveTabPane	被隐藏时是否销毁 DOM 结构	boolean	false
hideAdd	是否隐藏加号图标，在 type="editable-card" 时有效	boolean	false
size	大小，提供 large default 和 small 三种大小	string	default
tabBarGutter	tabs 之间的间隙	number	无
tabBarStyle	tab bar 的样式对象	object	-
tabPosition	页签位置，可选值有 top right bottom left	string	top
type	页签的基本样式，可选 line、card editable-card,border-card,capsule-card 类型	string	line
special(新)	页签的特殊样式	boolean	false

注意

• type 字段扩展了 border-card,capsule-card 两个类型
• special为新增类型，UI 设计的特殊标签页

Tabs 插槽

插槽名称	说明	参数
addIcon	自定义添加按钮	-	-
leftExtra	tab bar 上左侧额外的元素	-	-
moreIcon	自定义折叠 icon	-	-
renderTabBar	替换 TabBar，用于二次封装标签头	{ DefaultTabBar }
rightExtra	tab bar 上右侧额外的元素	-	-

Tabs 事件

事件名称	说明	回调参数
change	切换面板的回调	Function(activeKey) {}
edit	新增和删除页签的回调，在 type="editable-card" 时有效	(targetKey, action): void
tabClick	tab 被点击的回调	Function
tabScroll	滚动 TabBar 时触发	{ direction: 'left' | 'right' | 'top' | 'bottom' }

Tabs.TabPane

参数	说明	类型	默认值
forceRender	被隐藏时是否渲染 DOM 结构	boolean	false
key	对应 activeKey	string	无
tab	选项卡头显示文字	string|slot	无

Tabs.TabPane 插槽

插槽名称	说明	参数
closeIcon	自定义关闭图标，在 type="editable-card"时有效	-
tab	选项卡头显示文字	-