Tabs 标签页

Tabs 标签页组件用于在同一块区域内，通过标签页的形式，展示不同的内容模块，实现内容的分组切换展示。

参数

Props

名称	类型	默认值	描述
modelValue	string | number	-	当前激活的标签页，对应 items 中的 id 值
items	TabItem[]	[]	标签页数据
type	'line' | 'card' | 'round'	'line'	标签页类型
direction	'horizontal' | 'vertical'	'horizontal'	标签页方向
closable	boolean	false	是否可关闭标签页
addable	boolean	false	是否可新增标签页
beforeChange	(id: string | number) => boolean | Promise<boolean>	-	切换前的钩子函数。返回 true 则切换，返回 false 则不切换

TabItem

名称	类型	默认值	描述
id	string | number	-	标签页唯一标识
label	string	-	标签页标题
icon	string	-	标签页图标
disabled	boolean	false	是否禁用
closable	boolean	false	是否可关闭

Slots

名称	描述	参数
default	标签页内容	-

Events

名称	描述	参数
update:modelValue	激活标签页改变时触发	(value: string | number) => void
change	标签页切换时触发	(value: string | number) => void
close	关闭标签页时触发	(id: string | number) => void
add	点击新增按钮时触发	-

示例

基础用法

指定展示的页签

不同类型

纵向标签页

带图标

可关闭标签页

可新增标签页

TypeScript

export interface TabItem {
  // 标签页唯一标识
  id?: string | number;
  // 标签页标题
  label: string;
  // 标签页图标
  icon?: string;
  // 是否禁用
  disabled?: boolean;
  // 是否可关闭
  closable?: boolean;
}