vue2-countdown vue活动倒计时组件

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

最近公司在写一个移动商城的项目，涉及到拼团的内容，于是就有了倒计时的需求。一时没有想法，就在github上找到了vue2-countdown,将该项目引入到了我公司的商城项目中，发现了一些问题，在github上看了一下，好像vue2-countdown夭折了，一年多没有跟新了，而且还存在一些问题:(,特写此文来记录一下使用及修改过程。

项目是用还是很简单的

1. Install

   npm install vue2-countdown --save

• Usage

  import CountDown from 'vue2-countdown'
  components: { CountDown },
  methods: {

   countDownS_cb: function (x) {
     console.log(x)
   },
   countDownE_cb: function (x) {
     console.log(x)
   }

  }

• 列表项目

  <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>

• Options
  count-down里面的一些，上文步骤2中的参数，详情见上文链接。

vue2-countdown 项目存在的一些问题：

• 无法自定义提示文字
  
  作者在项目中注释掉了，导致我们在引入组建添加了此配置的话也无法显示提示语。
  解决方法：

     1.在node_modules中找到安装的vue2-countdown文件，修改vue2-countdown->lib->vue2-countdown.vue文件，将注释消除。
     2.其实整个项目有用的只有lib/vue2-countdown.vue文件，所有也可以像小编将该文件内容复制一份到自己的项目，新建一个vue文件，作为组件，然后将组件的注释解除。
  
  

• 倒计时逻辑问题
  引入后发现无论我们传什么时间过去，倒计时都是结束时间-开始时间重新计算，并非根据当前时间计算结束时间-当前时间的值，所以我们怎么配置，怎么刷新结果都是（end-start)，其实好像都和当前时间没有关系（这个让小编头痛了好久，一直以为是自己哪里写错了，后来发现是作者自己的代码逻辑有点问题）
  解决方法：
  
  将原先的this.start改为this.current。作者原先虽然获取到了传入的当前时间戳，但在method中却没有使用。将start改为current可以保证输出的是当前时间距离结束时间的时间长度。

总结：虽然按上述方法解决我所急需的一些需求，但感觉vue2-countdown还有一些可以完善的地方，小编会在后续的文章中更新相关信息，并提供一个npm供大家下载。

1024祝程序员们节日快乐，希望你们今天不像小编一样，在加班，呜呜~~(>_<)~~