Collapse 折叠面板

通过折叠面板收纳内容区域。

基础用法

可同时展开多个面板，默认第一个参数为数组。

手风琴效果

每次只能展开一个面板。

通过 accordion 属性来设置是否以手风琴模式显示。

自定义面板标题

除了可以通过 title 属性以外，还可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。

✨ 毛玻璃风格 (Unique)

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

将 type 设置为 glass。

✨ 幽灵模式 (Unique)

极简风格，移除边框和背景，仅保留必要的分割线。

将 type 设置为 ghost。

✨ 专注模式 (Unique)

当展开某一项时，非激活项会自动变暗，引导用户关注当前内容。

设置 focus-mode 属性。

✨ 自定义箭头位置

可以将箭头放置在左侧，符合特定的阅读习惯。

设置 arrow-placement 属性为 left。

API

Collapse Attributes

属性名	说明	类型	默认值
model-value / v-model	当前激活的面板(如果是手风琴模式，绑定值类型需要为string，否则为array)	string / number / array	-
accordion	是否是手风琴模式	boolean	false
type	风格类型	'default' / 'card' / 'glass' / 'ghost'	'default'
focus-mode	是否开启专注模式 (非激活项变暗)	boolean	false
arrow-placement	箭头位置	'left' / 'right' / 'none'	'right'

Collapse Events

事件名	说明	参数
change	当前激活面板改变时触发(如果是手风琴模式，参数 activeNames 类型为string，否则为array)	(activeNames: string | number | array)

CollapseItem Attributes

属性名	说明	类型	默认值
name	唯一标志符	string / number	-
title	面板标题	string	-
disabled	是否禁用	boolean	false
icon	自定义图标	string / Component	-

CollapseItem Slots

插槽名	说明
default	面板内容
title	标题内容
icon	标题图标
extra	标题右侧内容