# Collapse 折叠面板

### 引入

在`index.config.js中引入组件

```json
"usingComponents": {
  "van-collapse": "@vant/weapp/collapse/index",
  "van-collapse-item": "@vant/weapp/collapse-item/index"
}
```

## 代码演示

### 基础用法

通过`value`控制展开的面板列表，`activeNames`为数组格式

```html
 <van-collapse value={ this.state.active1 } data-key="active1" onChange={(e)=>this.onChange(e)}>
      <van-collapse-item title={this.state.title1}>{this.state.content1}</van-collapse-item>
      <van-collapse-item title={this.state.title2}>{this.state.content2}</van-collapse-item>
      <van-collapse-item title={this.state.title3} disabled>{this.state.content3}</van-collapse-item>
</van-collapse>
```

```javascript
import Toast from '../../vant/toast/toast';
    state = {
      active1: [0],
      active2: 0,
      active3: [],
      active4: [],
      title1: '顺丰优选',
      title2: '顺丰物流',
      title3: '顺丰修理',
      content1: '提供多样店铺模板，快速搭建网上商城',
      content2:
        '网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失',
      content3: '线上拓客，随时预约，贴心顺手的开单收银',
    };

  onChange(event) {
     const { key } = event.currentTarget.dataset;
     this.setState({
       [key]: event.detail,
     });
   }

  onOpen(event) {
    Toast('展开:'+event.currentTarget.dataset.key);
  }

  onClose(event) {
    Toast('关闭:'+event.currentTarget.dataset.key);
  }


```

### 手风琴

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

```html
<van-collapse value={ this.state.active2 } data-key="active2" accordion onChange={(e)=>this.onChange(e)}>
     <van-collapse-item title={this.state.title1}>{this.state.content1}</van-collapse-item>
     <van-collapse-item title={this.state.title2}>{this.state.content2}</van-collapse-item>
     <van-collapse-item title={this.state.title3}>{this.state.content3}</van-collapse-item>
</van-collapse>
<van-toast id="van-toast" />
```

### 事件监听

`van-collapse` 提供了 `change`, `open` 和 `close` 事件。`change` 事件在面板切换时触发，`open` 事件在面板展开时触发，`close` 事件在面板关闭时触发。

```html
<van-collapse value={ this.state.active3 } data-key="active3" onChange={(e)=>this.onChange(e)} onOpen={(e)=>this.onOpen(e)} onClose={(e)=>this.onClose(e)}>
     <van-collapse-item title={this.state.title1}>{this.state.content1}</van-collapse-item>
     <van-collapse-item title={this.state.title2}>{this.state.content2}</van-collapse-item>
     <van-collapse-item title={this.state.title3}>{this.state.content3}</van-collapse-item>
</van-collapse>
<van-toast id="van-toast" />
```

### 自定义标题内容

```html
 <van-collapse value={ this.state.active4 } data-key="active4" onChange={(e)=>this.onChange(e)}>
            <van-collapse-item title={this.state.title1}>
              <view slot="title">
                {this.state.title1}
                <van-icon name="question-o" customClass="van-icon-question" />
              </view>
              {this.state.content1}
            </van-collapse-item>
            <van-collapse-item
              title={this.state.title2}
              value="内容"
              icon="shop-o"
            >
              {this.state.content2}
            </van-collapse-item>
</van-collapse>
<van-toast id="van-toast" />
```


## API
### 注:属性应用在组件上需要统一使用驼峰式命名，如custom-class应变为
```html
<van-button type="primary" customClass='myClass' size="large">大号按钮</van-button>
```
### 注:事件应用在组件上需要统一使用驼峰式命名，如bind:click/bind:search/bind:before-enter应变为
```html
<van-button type="primary" onClick={()=>this.onClick()}>大号按钮</van-button>
<van-search type="primary" onSearch={()=>this.onSearch()}>大号按钮</van-search>
<van-transition type="primary" onBeforeEnter={()=>this.onBeforeEnter()}>大号按钮</van-transition>
```
### Collapse Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| value | 当前展开面板的 name | 非手风琴模式：_(string \| number)[]_<br>手风琴模式：_string \| number_ | - | - |
| accordion | 是否开启手风琴模式 | _boolean_ | `false` | - |
| border | 是否显示外边框 | _boolean_ | `true` | - |

### Collapse Event

| 事件名 | 说明           | 参数                           |
| ------ | -------------- | ------------------------------ |
| change | 切换面板时触发 | activeNames: _string \| Array_ |
| open | 展开面板时触发 | currentName: _string \| number_ |
| close | 关闭面板时触发 | currentName: _string \| number_ |

### CollapseItem Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| name | 唯一标识符，默认为索引值 | _string \| number_ | `index` | - |
| title | 标题栏左侧内容 | _string \| number_ | - | - |
| icon | 标题栏左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - |
| value | 标题栏右侧内容 | _string \| number_ | - | - |
| label | 标题栏描述信息 | _string_ | - | - |
| border | 是否显示内边框 | _boolean_ | `true` | - |
| is-link | 是否展示标题栏右侧箭头并开启点击反馈 | _boolean_ | `true` | - |
| clickable | 是否开启点击反馈 | _boolean_ | `false` | - |
| disabled | 是否禁用面板 | _boolean_ | `false` | - |

### CollapseItem Slot

| 名称       | 说明                          |
| ---------- | ----------------------------- |
| -          | 面板内容                      |
| value      | 自定义显示内容                |
| icon       | 自定义`icon`                  |
| title      | 自定义`title`                 |
| right-icon | 自定义右侧按钮，默认是`arrow` |

### Collapse 外部样式类

| 类名         | 说明         |
| ------------ | ------------ |
| custom-class | 根节点样式类 |

### CollapseItem 外部样式类

| 类名          | 说明         |
| ------------- | ------------ |
| custom-class  | 根节点样式类 |
| content-class | 内容样式类   |