Vue.js的一个简单的普通倒计时计时器组件。

安装和下载：

# Yarn
$ yarn add @chenfengyuan/vue-countdown

# NPM
$ npm i @chenfengyuan/vue-countdown --save

如何使用它：

1.导入倒计时组件。

import VueCountdown from '@chenfengyuan/vue-countdown';

2.导入组件。

Vue.component(VueCountdown.name, VueCountdown);

3. HTML。

<countdown :time="time" :interval="100" tag="p">
  <template slot-scope="props">New Year Countdown：{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }}.{{ Math.floor(props.milliseconds / 100) }} seconds.</template>
</countdown>

4.默认 props 。

/**
 * 初始化时自动开始倒计时。
 */
autoStart: {
  type: Boolean,
  default: true,
},
/**
 * 发射倒计时事件。
 */
emitEvents: {
  type: Boolean,
  default: true,
},
/**
 * 倒数过程的间隔时间(毫秒).
 */
interval: {
  type: Number,
  default: 1000,
  validator: (value) => value >= 0,
},
/**
 * 生成特定时区的当前时间。
 */
now: {
  type: Function,
  default: () => Date.now(),
},
/**
 * 组件根元素的标记名。
 */
tag: {
  type: String,
  default: 'span',
},
/**
 * 开始倒数的时间(以毫秒为单位)。
 */
time: {
  type: Number,
  default: 0,
  validator: (value) => value >= 0,
},
/**
 * 在渲染前转换输出props。
 */
transform: {
  type: Function,
  default: (props) => props,
},