Collapse 折叠面板

折叠面板是一种可以展开和收起内容的容器组件，用于节省页面空间，将内容分组展示。

Collapse 参数

Props

名称	类型	默认值	描述
visible	boolean	false	是否展开
label	string	''	标题
direction	Direction	'vertical'	展开方向
size	string | number	-	指定展开尺寸（高度/宽度）
disabled	boolean	false	是否禁用
name	string | number	''	唯一标识，用于分组控制

Slots

名称	描述	参数
trigger	触发器内容	{ expanded: boolean }
default	默认内容	-

Events

名称	描述	参数
update:visible	展开状态变化时触发	(value: boolean) => void
change	展开状态变化时触发	(value: boolean) => void

CollapseGroup 参数

Props

名称	类型	默认值	描述
active	string | number	''	当前展开的面板(手风琴模式)
modelValue	(string | number)[]	[]	展开的面板集合(多选模式)
accordion	boolean	false	是否手风琴模式
direction	Direction	'vertical'	展开方向

Slots

名称	描述	参数
default	默认内容	-

Events

名称	描述	参数
update:active	当前激活面板变化时触发	(value: string | number) => void
update:modelValue	当前激活面板集合变化时触发	(value: (string | number)[]) => void
change	面板状态变化时触发	(value: string | number | (string | number)[]) => void

示例

基础用法

自定义触发器

指定高度

横向折叠

禁用状态

折叠组模式

折叠组模式-横向

手风琴模式

TypeScript

// 方向
export type Direction = "horizontal" | "vertical";