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

日期:2019年12月31日

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


在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


用在项目中的效果:







vue-count-down

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




安装

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

2.浏览器引用



注册组件

Node.js注册

全局注册

局部注册

浏览器注册

全局注册

局部注册


用法

倒计时模式


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

1.属性

2.SLOT

计数模式


属性

2.slot


事件

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



推荐文章