Tabs 选项卡

选项卡切换组件。

何时使用

用户需要通过平级的区域将大块内容进行收纳和展现，保持界面整洁。

Tabs基本使用

Tabs卡片风格的标签

Tabs带有边框的卡片风格

Tabs自定义标签页标题

Tabs标签位置的设置

Tabs参数

参数	类型	默认	说明
v-model	ModelValueType	null	绑定值，选中选项卡的 name
type	ITabsType	''	风格类型
custom-width	string	''	Tabs 根节点宽度，接受任意 CSS width
css-class	string	''	Tabs 根节点附加 class
before-change	BeforeChangeType	null	切换前守卫；返回 false 时阻止切换
tab-position	ITabPositionType	top	选项卡所在位置

Tabs事件

事件	类型	说明
change	(activeName: string | number) => void	activeName 改变时触发

tabs类型定义

ModelValueType

export type ModelValueType = string | number | null

ITabsType

export type ITabsType = '' | 'card' | 'border-card'

ITabPositionType

export type ITabPositionType = 'top' | 'right' | 'bottom' | 'left'

BeforeChangeType

export type Active = string | number | null
export type BeforeChangeType = (id: Active) => boolean

Tabs插槽

默认插槽

Tab参数

参数	类型	默认	说明
label	LabelType	-	选项卡标题
name	NameType	-	与选项卡绑定值 value 对应的标识符，表示选项卡别名
disabled	boolean	false	是否禁用该选项卡

tab类型定义

LabelType

export type LabelType = string | number

NameType

export type NameType = string | number

Tab插槽

插槽名	说明
title	标签页标题
-	默认插槽