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

1.下载
npm install vue2-countdown --save

2.在自己的项目中引入这个组件（这个vue2-countdown是个组件欧，并不是js，css之类的文件），所以当我们引入之后，要进行注册

引入和注册：

<script>

import CountDown from 'vue2-countdown'

export default {

 components: { CountDown },

     }
</script>

3.使用这个组件

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

4.具体属性
参数解释

currentTime -- 当前时间戳,如果不传,默认获取用户本地的时间(建议传服务器的当前时间)
type: Number
required : false
default : ( new Date() ).getTime()

startTime -- 开始时间戳
type: Number
required : true

endTime -- 结束时间戳
type: Number
required : true

tipText -- 开始倒计时之前的提示文字
type: String
required : false
default : 距离开始

tipTextEnd -- 开始倒计时之后的提示文字
type: String
required : false
default : 距离结束

endText -- 倒计时结束之后的提示文字
type: String
required : false
default : 已结束

dayTxt -- 自定义显示的天数文字
type: String
required : false
default : :

hourTxt -- 自定义显示的小时文字
type: String
required : false
default : :

secondsTxt -- 自定义显示的分钟文字
type: String
required : false
default : :

secondsFixed -- 自定义显示的秒数文字
type: String
required : false
default : :

回调方法

start_callback() -- 开始倒计时结束之后的回调方法
type: Function
required : false

end_callback() -- 活动倒计时结束之后的回调方法
type: Function
required : false

5.一些问题修复

无法自定义提示文字：

在node_modules中找到安装的vue2-countdown文件，修改vue2-countdown.vue文件，将注释消除

image.png

6.倒计时逻辑问题

引入后发现无论我们传什么时间过去，倒计时都是结束时间-开始时间重新计算，并非根据当前时间计算结束时间-当前时间的值，所以我们怎么配置，怎么刷新结果都是（end-start)，其实好像都和当前时间没有关系（这个让小编头痛了好久，一直以为是自己哪里写错了，后来发现是作者自己的代码逻辑有点问题）
解决方法：

image.png

将原先的this.start改为this.current。作者原先虽然获取到了传入的当前时间戳，但在method中却没有使用。将start改为current可以保证输出的是当前时间距离结束时间的时间长度。

结语：

赵刚认为这个插件还需要进一步完善，我会在以后的文章中进行更新，并提供一个npm供大家下载。