CollapseItem 折叠面板子项

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

代码演示

基础用法

通过 title 控制子项的标题，name 为唯一标识符, key 为子项索引。

<hd-collapse accordion>
  <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>

禁用状态

通过 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>

子项展开

通过 open 属性可控制子项默认展开和关闭，默认 false。

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

export default {
  data() {
    return {
      activeNames: ['1'],
    };
  },
};

Props

Name	Description	Type	Required	Default
title	标题	String	false	-
disabled	是否可以点击收起	Boolean	false	默认值是：false
open	子项是否展开	Boolean	false	默认值是：false
name	唯一标识符	Number / String	false	-
index	标识当前为第几个	String / Number	false	-

Events

Event Name	Description	Parameters
change	组件面板打开或者收起时触发	对象，{index: index, show: true 或 false }，index为collapse-item的index参数，show为true表示被打开，false表示被收起

Slots

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

Methods

Method	Description	Parameters
init	重新初始化内部高度计算，用于异步获取内容的情形，请结合this.$nextTick()使用	-