# Collapse 折叠面板

[toc]

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-collapse": "../dist/collapse/index",
    "tea-collapse-item": "../dist/collapse-item/index"
  }
}

```

## 用法

首先在`index.js` 中定义好变量和方法。

```js
Page({
  data: {
    defaultValue: ['cvm'],
  },
  onLoad() {
    setTimeout(() => {
      this.setData({
        defaultValue: ['cdn'],
      });
    }, 5000);
  },

  open(e) {
    console.log(`当前打开的是：${e.detail}`);
  },
  close(e) {
    console.log(`当前关闭的是：${e.detail}`);
  },
  change(e) {
    console.log(`当前改变的是：${e.detail}`);
  },
  update(e) {
    console.log(`当前展开的是：${e.detail.join(', ')}`);
  },
});
```

### 基础用法

```html
<tea-collapse
  bind:open="open"
  bind:close="close"
  bind:change="change"
  bind:update="update"
>
  <tea-collapse-item
    title="CDN流量包"
    description="¥ 288.00"
    name="cdn"
  >
    <include src="./card.wxml"></include>
  </tea-collapse-item>
  <tea-collapse-item title="云服务器" name="cvm">
    <include src="./card.wxml"></include>
  </tea-collapse-item>
</tea-collapse>
```

### 传入默认值

```html
<tea-collapse
  bind:open="open"
  bind:close="close"
  bind:change="change"
  bind:update="update"
  value="{{['cvm']}}"
>
  <tea-collapse-item
    title="CDN流量包"
    description="¥ 288.00"
    name="cdn"
  >
    <include src="./card.wxml"></include>
  </tea-collapse-item>
  <tea-collapse-item title="云服务器" name="cvm">
    <include src="./card.wxml"></include>
  </tea-collapse-item>
</tea-collapse>
```

### 手风琴模式

```html
<tea-collapse
  bind:open="open"
  bind:close="close"
  bind:change="change"
  bind:update="update"
  accordion
>
  <tea-collapse-item
    title="CDN流量包"
    description="¥ 288.00"
    name="cdn"
  >
    <include src="./card.wxml"></include>
  </tea-collapse-item>
  <tea-collapse-item title="云服务器" name="cvm">
    <include src="./card.wxml"></include>
  </tea-collapse-item>
</tea-collapse>
```

### 异步传入值

```html
<tea-collapse
  bind:open="open"
  bind:close="close"
  bind:change="change"
  bind:update="update"
  value="{{ defaultValue }}"
>
  <tea-collapse-item
    title="CDN流量包"
    description="¥ 288.00"
    name="cdn"
  >
    <include src="./card.wxml"></include>
  </tea-collapse-item>
  <tea-collapse-item title="云服务器" name="cvm">
    <include src="./card.wxml"></include>
  </tea-collapse-item>
</tea-collapse>
```

## Props

| 参数        | 描述       | 类型        | 默认值     |
| --------- | -------- | --------- | ------- |
| value     | 传入的默认值   | `Array`   | `[]`    |
| accordion | 是否为手风琴模式 | `Boolean` | `false` |

## 事件

| 事件名    | 描述          | 回调参数              |
| ------ | ----------- | ----------------- |
| open   | 打开折叠面板项目时触发 | 折叠面板项目的`name`值    |
| close  | 关闭折叠面板项目时触发 | 折叠面板项目的`name`值    |
| change | 折叠面板状态改变时触发 | 折叠面板项目的`name`值    |
| update | 折叠面板状态改变时触发 | 折叠面板当前选中的`value`值 |

## Slots

| 名称  | 描述     |
| --- | ------ |
| -   | 折叠面板项目 |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |