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

1.下载

npm install vue2-countdown --save

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

引入和注册：

import CountDown from 'vue2-countdown'

export default {

components: { CountDown },

}

3.使用这个组件

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

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供大家下载。