Tabs 标签页

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

基础用法

基础的、简洁的标签页。

选项卡样式

选项卡样式的标签页。

只需要设置 type 属性为 card 就可以使标签页变为选项卡样式。

卡片化

卡片化的标签页。

将 type 设置为 border-card。

✨ 毛玻璃风格 (Unique)

独特的半透明毛玻璃风格，适用于现代感强的界面。

将 type 设置为 glass。

✨ 分段控制器 (Unique)

类似于 iOS 的 Segment Control 风格，常用于切换视图。

将 type 设置为 segment。

✨ 音效反馈 (Unique)

切换标签时播放清脆的提示音。

设置 sound 属性为 true 开启音效。

标签位置

可以通过 tab-position 设置标签位置。

支持 top、right、bottom、left。

可关闭

可以关闭标签页。

在 fyo-tabs 上设置 closable 属性，或者在 fyo-tab-pane 上设置 closable 属性。

动态增减标签页

增减标签页按钮只能在选项卡样式的标签页下使用。

API

Tabs Attributes

属性名	说明	类型	默认值
model-value / v-model	绑定值，选中选项卡的 name	string / number	-
type	风格类型	'card' / 'border-card' / 'glass' / 'segment'	'default'
closable	标签是否可关闭	boolean	false
addable	标签是否可增加	boolean	false
editable	标签是否同时可增加和关闭	boolean	false
tab-position	选项卡所在位置	'top' / 'right' / 'bottom' / 'left'	'top'
before-leave	切换标签之前的钩子，若返回 false 或返回 Promise 且被 reject，则阻止切换	(activeName, oldActiveName) => boolean | Promise	-
sound	是否开启点击音效	boolean	false

Tabs Events

事件名	说明	参数
tab-click	tab 被选中时触发	(pane: TabPaneContext, event: Event)
tab-change	activeName 改变时触发	(name: string | number)
tab-remove	点击 tab 移除按钮后触发	(name: string | number)
tab-add	点击 tab 新增按钮后触发	-
edit	点击 tab 的新增或移除按钮后触发	(name: string | number | null, action: 'remove' | 'add')

TabPane Attributes

属性名	说明	类型	默认值
label	选项卡标题	string	-
name	与选项卡绑定值 value 对应的标识符，表示选项卡别名	string / number	该选项卡的索引值
disabled	是否禁用	boolean	false
closable	标签是否可关闭	boolean	false
lazy	标签是否延迟渲染	boolean	false
icon	图标组件或名称	string / Component	-

TabPane Slots

插槽名	说明
default	标签页内容
label	标签标题内容