vue js时分秒计时器_Vue js框架的倒数计时器

vue js时分秒计时器

VUE倒计时 (vue-count-down-timer)

This is a count down timer for Vue js framework. This library supports two types of timers:

这是Vue js框架的倒计时计时器。 该库支持两种类型的计时器：

1. Timer mode: Timer based on hour, minute and second.

   计时器模式：基于小时，分钟和秒的计时器。

2. Single mode: Timber based on second (single circle without hours and minutes).

   单模式：以秒为单位的木材(单圆，没有小时和分钟)。

安装 (Installation)

npm install vue-circular-count-down-timer

After installation, import component and register it in the main.js:

安装后，导入组件并将其注册到main.js中：

import Vue from 'vue';
import CircularCountDownTimer from "vue-circular-count-down-timer";
Vue.use(CircularCountDownTimer);

文献资料 (Documentation)

Props	Description
initial-value	Initial value of timer, as seconds. (required)
stroke-width	Thickness of circle strokes in px.
seconds-stroke-color	Color of stroke of seconds circle.
minutes-stroke-color	Color of stroke of minutes circle.
hours-stroke-color	Color of stroke of hours circle.
underneath-stroke-color	Color of stroke of empty parts of circles.
seconds-fill-color	Color of background of seconds circle.
minutes-fill-color	Color of background of minutes circle.
hours-fill-color	Color of background of hours circle.
size	Width and height of circles in px.
padding	Space between circles in px.
hour-label	Label of hours circle.
minute-label	Label of minutes circle.
second-label	Label of seconds circle.
show-second	Whether to show seconds circle or not.
show-minute	Whether to show minutes circle or not.
show-hour	Whether to show hours circle or not.
show-negatives	To continue counting after reaching zero.
steps	Number of steps in single mode usage.
paused	To pause counting.
notify-every	To determine interval of triggering update event. Possible values: second, minute, hour, none. minute and hour works just in timer mode.

道具	描述
初始值	计时器的初始值，以秒为单位。 (需要)
笔划宽度	圆圈笔触的粗细(以像素为单位)。
中风颜色	秒圈的笔触颜色。
分钟描边色	分钟圈的笔触颜色。
中风颜色	小时圆的笔触颜色。
描边颜色	圆圈的空白部分的笔触颜色。
秒填充颜色	秒圈背景的颜色。
分钟填充颜色	分钟圆圈背景的颜色。
小时填充颜色	时数圈背景的颜色。
尺寸	圆圈的宽度和高度(以px为单位)。
填充	圆圈之间的间距(以px为单位)。
小时标签	小时圆的标签。
分钟标签	分钟圈的标签。
第二标签	秒圈的标签。
显示秒	是否显示秒圈。
显示分钟	是否显示分钟圈。
表演时间	是否显示小时圈。
显示阴性	达到零后继续计数。
脚步	单模式使用中的步骤数。
已暂停	暂停计数。
每次通知	确定触发更新事件的间隔。 可能的值：秒，分钟，小时，无。 分钟和小时仅在计时器模式下有效。

Events	Description
finish	Fires when counter reaches zero.
update	Fires on each counting.

大事记	描述
完	当计数器达到零时触发。
更新	每次计数时触发。

用法 (Usage)

1.基本用法 (1. Basic usage)

<circular-count-down-timer
    :initial-value="360500"
></circular-count-down-timer>

2.完全定制(定时器模式) (2. Fully customized (timer mode))

<circular-count-down-timer
        :initial-value="360500"
        :stroke-width="5"
        :seconds-stroke-color="'#f00'"
        :minutes-stroke-color="'#0ff'"
        :hours-stroke-color="'#0f0'"
        :underneath-stroke-color="'lightgrey'"
        :seconds-fill-color="'#00ffff66'"
        :minutes-fill-color="'#00ff0066'"
        :hours-fill-color="'#ff000066'"
        :size="200"
        :padding="4"
        :hour-label="'hours'"
        :minute-label="'minutes'"
        :second-label="'seconds'"
        :show-second="true"
        :show-minute="true"
        :show-hour="true"
        :show-negatives="true"
        :paused="some_variable"
        :notify-every="'minute'"
></circular-count-down-timer>

3.单模 (3. Single mode)

<circular-count-down-timer
        :initial-value="200"
        :steps="400"
></circular-count-down-timer>

4.听事件 (4. Listen to events)

<circular-count-down-timer
        :initial-value="200"
        @finish="finished"
        @update="updated"
></circular-count-down-timer>

...

methods: {
    finished: () => {
        console.log('finished');
    },
    updated: (status) => {
        console.log(status);    //{"value": 144, "seconds": 24, "minutes": 2, "hours": 0}
    }
}

翻译自: https://vuejsexamples.com/a-count-down-timer-for-vue-js-framework/

vue js时分秒计时器