CountDown 倒计时

使用指南

在.vue中引入组件

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

在main.js中引入样式文件

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

示例

<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>

<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	倒计时结束回调	-