vue 倒计时插件_Vue的高性能和高精度倒计时插件

vue 倒计时插件

真棒倒计时 (vue-awesome-countdown)

Countdown plug-in with high performance and high accuracy for Vue2.5.0+.

适用于Vue2.5.0 +的高性能和高精度倒计时插件。

View Demo 查看演示 Download Source 下载源

安装 (Installation)

Install

安装

$ npm install vue-awesome-countdown --save
# or
$ yarn add vue-awesome-countdown

...and import and use the plugin like so:

...然后像这样导入和使用插件：

import vueAwesomeCountdown from 'vue-awesome-countdown'Vue.use(vueAwesomeCountdown, 'vac') // Component name, `countdown` and `vac` by default

用法 (Usage)

<countdown :end-time="new Date().getTime() + 60000"><spanslot="process"slot-scope="anyYouWantedScopName">{{ `Lefttime: ${anyYouWantedScopName.timeObj.ceil.s}` }}</span><span slot="finish">Done!</span>
</countdown>

<vac :end-time="new Date().getTime() + 60000"><spanslot="process"slot-scope="{ timeObj }">{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}</span><span slot="finish">Done!</span>
</vac>

SSR(Nuxt) (SSR (Nuxt))

<no-ssr><vac :end-time="new Date().getTime() + 60000"><spanslot="process"slot-scope="{ timeObj }">{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}</span><span slot="finish">Done!</span></vac>
</no-ssr>

道具 (Props)

Prop	Required	Explain	Type	Default
startTime	`false`	Time stamp of countdown start	`[String, Number, Date]`	`null`
endTime	when `leftTime` undefined	Time stamp of countdown end	`[String, Number, Date]`	`null`
leftTime	when `endTime` undefined	Remaining milliseconds of countdown end	`Number`	`0`
autoStart	`false`	Start countdown automatically	`Boolean`	`true`
speed	`false`	Unit: millisecond	`Number`	`1000`
tag	`false`	The wrap tag name	`String`	`span`

Struts	需要	说明	类型	默认
开始时间	`false`	倒计时开始的时间戳	`[String, Number, Date]`	`null`
时间结束	当`leftTime`未定义时	倒数计时结束时间戳	`[String, Number, Date]`	`null`
leftTime	当`endTime`未定义时	倒数计时结束剩余的毫秒数	`Number`	`0`
自动启动	`false`	自动开始倒数	`Boolean`	`true`
速度	`false`	单位：毫秒	`Number`	`1000`
标签	`false`	包装标签名称	`String`	`span`

数据 (Data)

The data can get it through slot-scop or methods.

数据可以通过slot-scop或methods 。

Data	Explain	Default
state	The countdown run state, the states are `beforeStart`, `stoped`, `process` and `finised`	`beforeStart`
attrs	The countdown component tag attributes	`{}`
actualEndTime	Actual countdown end time	`null`
timeObj	Look look	`{}`
countdownTimer	The countdown timer function, Do not use as much as possible.	`null`
actualStartTime	Actual countdown start time.	`null`
runTimes	Countdown run times (The `onProcess` methods run times)	`0`
usedTime	The total time consuming from the countdown to the end.	`0`

数据	说明	默认
州	倒计时运转状态时，状态是`beforeStart` ， `stoped` ， `process`和`finised`	`beforeStart`
属性	倒计时组件标签属性	`{}`
实际结束时间	实际倒数结束时间	`null`
timeObj	看看	`{}`
倒计时器	倒数计时器功能，请勿使用过多。	`null`
实际开始时间	实际倒数开始时间。	`null`
运行时间	倒计时运行时间( `onProcess`方法的运行时间)	`0`
usedTime	从倒数计时到结束的总时间。	`0`

timeObj (timeObj)

{"endTime": 1542634411361,"speed": 1000,"leftTime": 97019,"d": "0","h": "00","m": "01","s": "37","ms": "019","org": {"d": 0.001134247685185185,"h": 0.02722194444444444,"m": 1.6333166666666665,"s": 37.998999999999995,"ms": 19},"ceil": {"d": 1,"h": 1,"m": 2,"s": 98}
}

插槽 (Slots)

Slot process and slot finish will not display at the same time.

插槽process和插槽finish不会同时显示。

name	slot-scop	Position	Display condition
prev	component `_self`	1	Defined, Controllable display
before	component `_self`	2	On before start, `state === 'beforeStart'`
process	component `_self`	2	On process, `state === 'process'`
finish	component `_self`	3	On finish, `state === 'finished'`
default	component `_self`	3	Defined, Controllable display

名称	插槽范围	位置	显示条件
上一个	组件`_self`	1个	定义的，可控制的显示
之前	组件`_self`	2	在启动之前， `state === 'beforeStart'`
处理	组件`_self`	2	处理中， `state === 'process'`
完	组件`_self`	3	完成后， `state === 'finished'`
默认	组件`_self`	3	定义的，可控制的显示

方法 (Methods)

The methods can be accesse through slot-scop or $refs.

可以通过slot-scop或$refs这些方法。

Method	Explain	Parameters
startCountdown		`restart`
stopCountdown		no
switchCountdown		no
finishCountdown		no
doCountdown		no

方法	说明	参量
startCountdown		`restart`
stopCountdown		没有
switchCountdown		没有
finishCountdown		没有
doCountdown		没有

事件 (Event)

Event	Explain	Parameters
onStart	Functions executed at the beginning of countdown	`vm`
onProcess	Function executed when countdown is performed	`vm`
onStop	Function executed when countdown stops	`vm`
onFinish	Function executed when countdown finished	`vm`

事件	说明	参量
onStart	在倒数开始时执行的功能	`vm`
处理中	执行倒数计时时执行的功能	`vm`
onStop	倒数停止时执行的功能	`vm`
onFinish	倒数完成后执行的功能	`vm`

翻译自: https://vuejsexamples.com/countdown-plug-in-with-high-performance-and-high-accuracy-for-vue/