> For the complete documentation index, see [llms.txt](https://iview-mpvue.gitbook.io/iview-mpvue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iview-mpvue.gitbook.io/iview-mpvue/shi-tu/countdown-dao-ji-shi.md).

# CountDown 倒计时

## 使用指南

在.vue中引入组件

```javascript
<script>
    import iCountDown from 'iview-mpvue/dist/components/countDown/countDown'
    export default {
        components: {
            'i-count-down': iCountDown
        }
    }
</script>
```

在main.js中引入样式文件

```javascript
import 'iview-mpvue/dist/components/countDown/style/css'
```

## 示例

```markup
<div class="div-wrap">
    <text class="type-title">倒计时：</text>
    <i-count-down
        :target="targetTime"
        :clear-timer="clearTimer"
    ></i-count-down>
</div>

<div class="div-wrap">
    <text class="type-title">显示天的倒计时：</text>
    <i-count-down
        :target="targetTime1"
        :show-day="true"
        :clear-timer="clearTimer"
    ></i-count-down>
</div>


<div class="div-wrap">
    <text class="type-title">自定义格式倒计时：</text>
    <i-count-down
        :target="targetTime"
        :format="myFormat"
        :clear-timer="clearTimer"
    ></i-count-down>
</div>

<div class="div-wrap">
      <text class="type-title">自定义格式倒计时：</text>
      <i-count-down
          :target="targetTime1"
          :show-day="true"
          :format="myFormat1"
          :clear-timer="clearTimer"
      ></i-count-down>
</div>

<div class="div-wrap">
      <text class="type-title">执行回调的倒计时：</text>
      <i-count-down
          :target="targetTime2"
          @callback="myLinsterner"
          :clear-timer="clearTimer"
      ></i-count-down>
      <text>倒计时状态：{{status}}</text>
</div>


<div class="div-wrap">
      <text class="type-title">修改倒计时样式：</text>
      <i-count-down
          :target="targetTime"
          countdown-class="big"
          :clear-timer="clearTimer"
      ></i-count-down>
</div>
```

```javascript
<script>
export default {
    ...
    data() {
        return {
            targetTime: 0,
            targetTime1: 0,
            targetTime2: 0,
            myFormat: ['时', '分', '秒'],
            myFormat1: ['天', '时', '分', '秒'],
            status: '进行中...',
            clearTimer: false
        }
    },
    onLoad() {
        this.targetTime = new Date().getTime() + 6430000
        this.targetTime1 = new Date().getTime() + 86430000
        this.targetTime2 = new Date().getTime() + 10000
    },
    onUnload() {
        this.clearTimer = true
    },
    methods: {
        myLinsterner() {
            this.status = '结束'
        }
    }
}
</script>
```

## API

CountDown properties

| 属性          | 说明           | 类型      | 默认值   |
| ----------- | ------------ | ------- | ----- |
| i-class     | 自定义 class 类名 | String  | -     |
| target      | 目标时间         | Number  | -     |
| show-day    | 是否显示天数       | Boolean | false |
| format      | 时间格式化显示      | String  | -     |
| clear-timer | 是否停止计时       | Boolean | false |

CountDown events

| 事件名           | 说明      | 返回值 |
| ------------- | ------- | --- |
| v-on:callback | 倒计时结束回调 | -   |