CollapseItem 折叠面板子项

将一组内容放置在多个折叠面板子项中，点击面板子项的标题可以展开或收缩其内容。

代码演示

基础用法

通过v-model控制展开的面板列表，activeNames为数组格式。

<hd-collapse v-model="activeNames">
  <hd-collapse-item title="标题1" name="1" index="1">内容</hd-collapse-item>
  <hd-collapse-item title="标题2" name="2" index="2">内容</hd-collapse-item>
  <hd-collapse-item title="标题3" name="3" index="3">内容</hd-collapse-item>
</hd-collapse>

const activeNames = ref<string | string[]>([])

手风琴

通过accordion可以设置为手风琴模式，最多展开一个面板，此时activeName为字符串格式。

<hd-collapse accordion v-model="activeNames">
  <hd-collapse-item title="标题1" name="1" index="1">内容</hd-collapse-item>
  <hd-collapse-item title="标题2" name="2" index="2">内容</hd-collapse-item>
  <hd-collapse-item title="标题3" name="3" index="3">内容</hd-collapse-item>
</hd-collapse>

const activeNames = ref<string | string[]>('1')

禁用状态

通过 disabled 属性来禁用单个面板。

<hd-collapse accordion>
  <hd-collapse-item title="标题1" index="1">内容</hd-collapse-item>
  <hd-collapse-item title="标题2" index="2" disabled>内容</hd-collapse-item>
  <hd-collapse-item title="标题3" index="3" disabled>内容</hd-collapse-item>
</hd-collapse>

Props

Name	Description	Type	Required	Default
title	标题栏左侧内容	String	false	-
value	标题栏右侧内容	String	false	-
label	标题栏描述信息	String	false	-
border	是否显示内边框	Boolean	false	默认值是：false
isLink	是否展示标题栏右侧箭头并开启点击反馈	Boolean	false	默认值是：false
clickable	是否开启点击反馈	Boolean	false	默认值是：false
disabled	是否禁用面板	Boolean	false	默认值是：false
icon	标题栏左侧图标名称或图片链接，可选值见 Icon 组件	String	false	-
name	唯一标识符	Number / String	false	-
index	标识当前为第几个	String / Number	false	-

Slots

Name	Description	Default Slot Content
default	面板展开时显示的内容	-