Collapse

可以折叠 / 展开的内容区域。

案例

基础用法

用于将复杂的内容区域分组和隐藏，可折叠或展开。默认可以展开多个面板。

手风琴模式

通过 accordion 开启手风琴模式，同时只能打开一个面板。手风琴模式下 activeNames 仍为数组，最多包含一项。

禁用

通过 disabled 禁用面板。

嵌套面板

面板多层嵌套。

无边框模式

通过设置 bordered="false" 隐藏边框。

分割线

通过 divider 控制面板之间的分割线。

展开间距

通过 offset 控制展开面板之间的间距。

额外节点

通过 extra 可以设置额外节点。点击 extra 区域不会触发展开。

展开图标

为展开项自定义展开图标

自定义样式

自定义面板样式。

展开图标位置

通过 expand-icon-position 属性设置展开图标的位置。

隐藏时销毁

通过设置 destroy-on-hide 可以让面板内容在隐藏时销毁。

切换全部

通过 toggleAll 批量展开 / 收起面板。手风琴模式下不可用。

API

<collapse> Props

参数名	描述	类型	默认值
active-names (v-model)	当前展开的面板的 name	(string | number)[]	-
default-active-names	默认展开的面板的 name （非受控模式）	(string | number)[]	[]
accordion	是否开启手风琴模式	boolean	false
show-expand-icon	是否显示展开图标	boolean	-
expand-icon-position	展开图标显示的位置	'left' | 'right'	'left'
bordered	是否显示边框	boolean	true
divider	是否显示面板分割线	boolean	true
offset	展开面板是否显示间距	boolean	false
destroy-on-hide	是否在隐藏时销毁内容	boolean	false

<collapse> Events

事件名	描述	参数
change	展开的面板发生改变时触发	activeNames: (string | number)[] ev: Event

<collapse> Methods

方法名	描述	参数	返回值
toggleAll	开启或关闭所有面板（手风琴模式下无效）	options: CollapseToggleAllOptions	-

CollapseToggleAllOptions

参数	描述	类型	默认值
expand	'inverse' 切换全部；boolean 控制全部展开或收起	'inverse' | boolean	-
skipDisabled	是否跳过禁用面板	boolean	false

<collapse> Slots

插槽名	描述	参数
expand-icon	展开图标	active: boolean disabled: boolean position: 'left' | 'right'
default	面板内容	-

<collapse-item> Props

参数名	描述	类型	默认值
name (必填)	面板唯一标识，对应 activeNames 中的值	string | number	-
title	面板的标题	string	-
disabled	是否禁用	boolean	false
show-expand-icon	是否显示展开图标	boolean	true
destroy-on-hide	是否在隐藏时销毁内容	boolean	false

<collapse-item> Slots

插槽名	描述	参数
title	面板的标题	-
extra	额外内容	-
expand-icon	展开图标	active: boolean disabled: boolean position: 'left' | 'right'
default	面板内容	-

类型定义

组件导出以下类型定义。Collapse.Item 与 CollapseItem 为同一组件。

import type { CollapseInstance, CollapseToggleAllOptions } from '@cedarjs/ui'