countdown

倒数组件 A simple countdown component for vue js 2.0

Usage

<!-- auto mode -->
<countdown ref="countdown" :size="160" :time="10" />
<!-- manual mode -->
<countdown ref="countdown-manual" :size="160" :time="10" mode="manual" />
<!-- static mode -->
<countdown ref="countdown-static" :size="160" :time="10" mode="static" />

<button @click="play">auto</button>
<button @click="setTime">manual</button>
<button @click="setStaticTime">static</button>

import Countdown from '@tree-zhou/countdown';
export default {
  components: {
    Countdown
  },
  methods: {
    play() {
      this.$refs['countdown'].play();
    },

    setTime() {
      let countdown = this.$refs['countdown-manual'];
      let time = 10;
      countdown.setTime(time);
      let timer = setInterval(() => {
        time--;
        if (time === 0) {
          countdown.setTime(time);
          clearInterval(timer);
          return;
        }
        countdown.setTime(time);
      }, 1000);
    },

    setStaticTime() {
      let time = 8;
      this.$refs['countdown-static'].setStaticTime(time);
    }
  }
};

Attributes

| 参数 | 类型 | 必填 | 可选 | 默认值 | 说明 | | ------------- | ------ | ----- | ---------------------- | ------- | ------------------------------------------------------------------------------------ | | time | number | true | - | - | 倒计时的开始时间 | | size | number | true | - | - | 组件尺寸，单位 px | | mode | string | false | auto、manual、static、 | auto | auto:自动倒计时； manual：由父组件设定定时器传入要显示的时间； static:显示设置的时间 | | bg-color | string | false | - | #fff | 背景颜色 | | interval | number | false | - | 1000 | 间隔时间,单位 ms | | annulus-color | string | false | - | #0e65ff | 圆环色 | | font-color | string | false | - | #000 | 字体色 |

Methods

| 方法名 | 参数 | 说明 | 返回 | | ------- | ----------- | -------- | ---- | | reset | - | 重置 | - | | setMode | mode:string | 设置模式 | - |

Auto Mode Methods

| 方法名 | 参数 | 说明 | 返回 | | ------ | ---- | ------------------------------------------------------------------ | ------- | | play | - | 开始倒计时,倒计时结束时调用 promise 的 resole; | promise | | pause | - | 暂停倒计时 ; | - |

Manual Mode Methods

| 方法名 | 参数 | 说明 | 返回 | | ------- | ---- | -------------------------------------- | ---- | | setTime | - | 设置显示的时间 ; | - |

Static Mode Methods

| 方法名 | 参数 | 说明 | 返回 | | ------------- | ---- | -------------------------------------- | ---- | | setStaticTime | - | 设置显示的时间 ; | - |

Auto Mode Events

| 事件名 | 回调参数 | 说明 | | ------ | -------- | ---------------- | | end | - | 倒计时结束时触发 |