vue2-countdown vue活动倒计时组件及遇到的坑
基于vue2.x的活动倒计时组件
主要是最近为了公司做一个倒计时活动才找到了这个组件使用的。于是去github上翻看了文档结果是一年多没更新了,主要还是有部分bug还未修复的。还有就是自己遇到的坑吧。
以下是该组件的基本使用方法
1.Install
npm install vue2-countdown --save-dev
2.Usage
import CountDown from 'vue2-countdown'
components: { CountDown },
<count-down
v-on:start_callback="countDownS_cb(1)"
v-on:end_callback="countDownE_cb(1)"
:currentTime="1481450106"
:startTime="1481450110"
:endTime="1481450115"
:tipText="'距离开始文字1'"
:tipTextEnd="'距离结束文字1'"
:endText="'结束自定义文字2'"
:dayTxt="'天'"
:hourTxt="'小时'"
:minutesTxt="'分钟'"
:secondsTxt="'秒'">
</count-down>
> 具体参数使用参考文档-附上跳转链接:[vue2-countdown]
vue2-countdown 项目存在的一些问题:
1.无法自定义提示文字
作者在项目中注释掉了,导致我们在引入组建添加了此配置的话也无法显示提示语。
解决方法:
1.在node_modules中找到安装的vue2-countdown文件,修改vue2-countdown->lib->vue2-countdown.vue文件,将注释消除。
2.倒计时逻辑问题
引入后发现无论我们传什么时间过去,倒计时都是结束时间-开始时间重新计算,并非根据当前时间计算结束时间-当前时间的值,所以我们怎么配置,怎么刷新结果都是(end-start),其实好像都和当前时间没有关系,后来发现是作者自己的代码逻辑有点问题
解决方法:
将原先的this.start改为this.current。作者原先虽然获取到了传入的当前时间戳,但在method中却没有使用。将start改为current可以保证输出的是当前时间距离结束时间的时间长度。
3.后台请求结束时间的问题,vue2-countdown无法获取到倒计时的结束时间,所以我在最后是在初始化的时候做了一个定时器来重新获取时间。

这个就可以正常的跑起来了。
总结:这个插件主要的问题还是很多的,问题1跟2也是自己上网去查才查到的。希望后续有大能可以更新下这个插件吧。以上就是我所遇到的坑了。希望有用
