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祝程序员们节日快乐，但愿大家今天不像小编同样，在加班，呜呜~~(>_<)~~