# CountDown 倒计时

### 引入

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

```json
"usingComponents": {
  "van-count-down": "@vant/weapp/count-down/index"
}
```

## 代码演示

### 基本用法

`time`属性表示倒计时总时长，单位为毫秒

```html
<van-count-down time={this.state.time} format={'HH:mm:ss'}/>
```

```js
 state = {
    time: 30 * 60 * 60 * 1000,
 };
```

### 自定义格式

通过`format`属性设置倒计时文本的内容

```html
<van-count-down time={this.state.time} format="DD 天 HH 时 mm 分 ss 秒" />
```

### 毫秒级渲染

倒计时默认每秒渲染一次，设置`millisecond`属性可以开启毫秒级渲染

```html
 <van-count-down millisecond time={ this.state.time } format="HH:mm:ss:SSS" />
```

### 自定义样式

设置`use-slot`属性后可以自定义倒计时样式，需要通过`bind:change`事件获取`timeData`对象并自行渲染，格式见下方表格

```html
<van-count-down useSlot time={ this.state.time } onChange={(e)=>this.onChange(e)} >
     <text class="item">{this.state.timeData.hours}</text>
     <text class="item">{this.state.timeData.minutes}</text>
     <text class="item">{this.state.timeData.seconds}</text>
</van-count-down>
```

```js

  state = {
    time: 30 * 60 * 60 * 1000,
    timeData: {},
  };

  onChange(e) {
    this.setData({
      timeData: e.detail,
    });
  }

```

```css
.item {
  display: inline-block;
  width: 44rpx;
  margin-right: 10rpx;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
  background-color: #1989fa;
  border-radius: 4rpx;
}
```

### 手动控制

通过 `selectComponent` 选择器获取到组件实例后，可以调用`start`、`pause`、`reset`方法

```html
<van-count-down
  class="control-count-down"
  millisecond
  time="{{ 3000 }}"
  auto-start="{{ false }}"
  format="ss:SSS"
  bind:finish="finished"
/>

<van-grid clickable column-num="3">
  <van-grid-item text="开始" icon="play-circle-o" bindclick="start" />
  <van-grid-item text="暂停" icon="pause-circle-o" bindclick="pause" />
  <van-grid-item text="重置" icon="replay" bindclick="reset" />
</van-grid>
```

```js
Page({
  start() {
    const countDown = this.selectComponent('.control-count-down');
    countDown.start();
  },

  pause() {
    const countDown = this.selectComponent('.control-count-down');
    countDown.pause();
  },

  reset() {
    const countDown = this.selectComponent('.control-count-down');
    countDown.reset();
  },

  finished() {
    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>
```
### Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| time | 倒计时时长，单位毫秒 | _number_ | - | - |
| format | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | _string_ | `HH:mm:ss` | - |
| auto-start | 是否自动开始倒计时 | _boolean_ | `true` | - |
| millisecond | 是否开启毫秒级渲染 | _boolean_ | `false` | - |
| use-slot | 是否使用自定义样式插槽 | _boolean_ | `false` | - |

### Events

| 事件名 | 说明                                         | 回调参数 |
| ------ | -------------------------------------------- | -------- |
| finish | 倒计时结束时触发                             | -        |
| change | 时间变化时触发，仅在开启`use-slot`后才会触发 | timeData |

### timeData 格式

| 名称         | 说明     | 类型     |
| ------------ | -------- | -------- |
| days         | 剩余天数 | _number_ |
| hours        | 剩余小时 | _number_ |
| minutes      | 剩余分钟 | _number_ |
| seconds      | 剩余秒数 | _number_ |
| milliseconds | 剩余毫秒 | _number_ |

### 方法

通过 selectComponent 可以获取到 CountDown 实例并调用实例方法

| 方法名 | 参数 | 返回值 | 介绍 |
| --- | --- | --- | --- |
| start | - | - | 开始倒计时 |
| pause | - | - | 暂停倒计时 |
| reset | - | - | 重设倒计时，若`auto-start`为`true`，重设后会自动开始倒计时 |