Collapse 折叠面板

基本用法

WARNING

当v-model绑定的值不为数组，那么效果同手风琴

手风琴

不同的切换策略

show代表v-show切换，而if代表v-if切换

不同的切换区域

默认点击整个header区域可切换折叠面板，也可以自行配置可切换区域

箭头位置

简约模式

嵌套使用

自定义slot

可通过slot=icon/title/extra自定义折叠面板的header

禁用某个CollapseItem

API

Collapse Props

参数名	说明	类型	可选值	默认值	必填
v-model	注意：当绑定一个非数组值时，效果等同于accordion	strign / string[] / number / number[]		[]
accordion	手风琴模式	boolean		false
plain	简约模式	boolean		false
displayStrategy	ColapseItem显示策略（if => v-if, show => v-show）	string	show / if	show
arrowPlacement	箭头位置	string	start / end	start
triggerArea	可点击切换的区域	string	space / icon / title / extra	[space, icon, title, extra]

Collapse Events

事件名	说明	回调参数

Collapse Slots

插槽名	说明	子标签
default	默认插槽

CollapseItem Props

参数名	说明	类型	可选值	默认值	必填
name	唯一标识	string / number		getCurrentInstance().uid
title	标题	string		getCurrentInstance().uid
disabled	是否禁用	boolean		false
displayStrategy	显示策略（v-if/v-show），如果值为undefined，那么使用 Collapse 的对应值	string	show / if	undefined

Collapse Slots

插槽名	说明	子标签
default	默认插槽
icon	图标
title	标题
extra	额外区域