基于Vue.js活动倒计时组件

vue2-countdown vue活动倒计时组件及遇到的坑

基于vue2.x的活动倒计时组件

主要是最近为了公司做一个倒计时活动才找到了这个组件使用的。于是去github上翻看了文档结果是一年多没更新了，主要还是有部分bug还未修复的。还有就是自己遇到的坑吧。

以下是该组件的基本使用方法

1.Install

npm install vue2-countdown --save-dev

2.Usage

import CountDown from 'vue2-countdown'

components: { CountDown },

  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="'秒'">

> 具体参数使用参考文档-附上跳转链接：[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也是自己上网去查才查到的。希望后续有大能可以更新下这个插件吧。以上就是我所遇到的坑了。希望有用