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 | - | 倒计时结束时触发 |