Collapse 折叠面板

基础用法

可以同时展开多个面板。

<at-collapse :value="[0, 1]">
  <at-collapse-item
    v-for="(item, index) in list" :key="index"
    :title="item.title" :disabled="item.disabled">
    <div>
      {{ item.content }}
    </div>
  </at-collapse-item>
</at-collapse>

手风琴效果

手风琴，每次只能打开一个面板。

<at-collapse accordion :value="0">
  <at-collapse-item
    v-for="(item, index) in list" :key="index"
    :title="item.title">
    <div>
      {{ item.content }}
    </div>
  </at-collapse-item>
</at-collapse>

面板嵌套

面板内可以嵌套面板。

<at-collapse @on-change="changeHandle" value="0">
  <at-collapse-item
    v-for="(item, index) in list" :key="index"
    :title="item.title">
    <div>
      {{ index !== 0 ? item.content : '' }}
      <at-collapse accordion v-if="index === 0">
        <at-collapse-item title="嵌套面板">
          <div>嵌套面板的内容</div>
        </at-collapse-item>
      </at-collapse>
    </div>
  </at-collapse-item>
</at-collapse>

自定义标题

除了可以通过属性 title 设置标题外，slot: title 也可以传入自定义内容。

<at-collapse accordion :value="value">
  <at-collapse-item name="collapse1">
    <div slot="title">标题一 <i class="icon icon-info"></div>
    <div>内容一</div>
  </at-collapse-item>
  <at-collapse-item name="collapse2">
    <div slot="title">标题一 <i class="icon icon-box"></div>
    <div>内容一</div>
  </at-collapse-item>
  <at-collapse-item>
    <div slot="title">标题一 <i class="icon icon-calendar"></div>
    <div>内容一</div>
  </at-collapse-item>
</at-collapse>

极简风格

设置属性 simple 使用极简风格的折叠面板

<at-collapse simple accordion :value="0">
  <at-collapse-item
    v-for="(item, index) in list" :key="index"
    :title="item.title">
    <div>
      {{ item.content }}
    </div>
  </at-collapse-item>
</at-collapse>

Collapse 参数

Collapse 事件

CollapseItem 参数

CollapseItem slot