分享一个Vue倒数、倒计时组件

最近在项目中用到一个需要用到一个倒计时功能,用于发送验证码倒计时、错误返回倒计时、活动结束倒计时等等功能。


在github上查了一些开源的组件,主要有两类,一种是deadline,即设定一个结束时间,然后用setTimeOut定时(一般是一秒)刷新剩余时间;另一类是countdown,这类是设定次数count,也是用setTimeOut定时减一,count为零即停止。


这两类组件,各有千秋,前者比较准确,可以忽略代码运行时间,到了deadline就停止计时,可用于活动结束等结束时间要求比较严格的场景。后者功能显示简单,只显示倒数,而且可以设置步长step,比如设置2秒一步。


综合考虑,还是重新做了个轮子。

GIT:https://github.com/liuwave/vue-count-down

演示:http://git.oldmen.cn/vue-count-down/index.html


用在项目中的效果:

115ce15b7003fb0ee71ac0ec.png



a7179fa01dd86dc4e60c8641.png

120f18a21789532c4e86f8a2.png





vue-count-down

Vue2.X的倒数、倒计时组件,无依赖项,轻量级,轻松实现倒计数、倒计时,可以通过设置




安装

  1. Node.js安装
npm i @liuwave/vue-count-down --save

2.浏览器引用

b4852400f2f34e85ff58953e.png



注册组件

Node.js注册

全局注册

8e443686f1953abc4d555b46.png

局部注册

f05e82f6a706d876c173e77e.png

浏览器注册

全局注册

398959452a6b578281f7ad56.png

局部注册

46106180a913d8a54eef179d.png


用法

倒计时模式

b86fb068b23e7ecc269970ee.png


model 默认为 timer end-time 可以为 时间戳 、时间字符串(2020-19-25) 或者 Date对象 end-time 和 count 同时存在时,以count为准

1.属性

180845e255c808e4b03dcace.png

2.SLOT

377e81b0a56280636fd48668.png计数模式

f0fa24e9020b436aa7a0c751.png


属性

0f291bf6180c2d0dd6351b05.png

2.slot

42c4a863ee2a32a60948d71b.png


事件

cd804d7cb0adcf8b9c726489.png

on-update 触发输出参数
timer模式:{day: "0", hour: "0", minute: "0", second: "10", restCount: 10}
counter模式 :{restCount:0}

f2f413404e8955d40c16d2c5.png



猜你喜欢

微信QQ空间QQ好友新浪微博联系客服