1.0.1 • Published 5 years ago

@tree-zhou/countdown v1.0.1

Weekly downloads
1
License
MIT
Repository
github
Last release
5 years ago

countdown

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

npm.io

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

参数类型必填可选默认值说明
timenumbertrue--倒计时的开始时间
sizenumbertrue--组件尺寸,单位 px
modestringfalseauto、manual、static、autoauto:自动倒计时; manual:由父组件设定定时器传入要显示的时间; static:显示设置的时间
bg-colorstringfalse-#fff背景颜色
intervalnumberfalse-1000间隔时间,单位 ms
annulus-colorstringfalse-#0e65ff圆环色
font-colorstringfalse-#000字体色

Methods

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

Auto Mode Methods

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

Manual Mode Methods

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

Static Mode Methods

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

Auto Mode Events

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