vue 倒计时 插件_Vue学习笔记-倒计时插件

安装

1.cnpm/npm

npm install vue2-countdown --save

2.Git 下载源码

git clone https://github.com/cgygd/vue2-countdown

使用

:currentTime="currentTime"

:startTime="startTime"

:endTime="endTime"

:tipText="'距离订单开始还有'"

:tipTextEnd="'距离订单关闭还剩'"

:endText="'订单已关闭'"

:dayTxt="'天'"

:hourTxt="'小时'"

:minutesTxt="'分钟'"

:secondsTxt="'秒'">

import CountDown from 'vue2-countdown'

components: {

CountDown

},

data() {

return {

currentTime:0,

startTime:0,

endTime:0,

}

},

methods: {

countDownS_cb: function (x) {

console.log(x)

},

countDownE_cb: function (x) {

console.log(x)

}

}

参数解释

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

问题修改

但是在使用过程中发现了vue2-countdown 项目存在的一些问题：

1.无法自定义提示文字

作者在项目中注释掉了，导致我们在引入组建添加了此配置的话也无法显示提示语。

解决方法：

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

注释.png

取消注释.png

2.其实整个项目有用的只有lib/vue2-countdown.vue文件，所有也可以将该文件内容复制一份到自己的项目，新建一个vue文件，作为组件，然后将组件的注释解除。

2.倒计时逻辑问题

引入后发现无论我们传什么时间过去，倒计时都是结束时间-开始时间重新计算，并非根据当前时间计算结束时间-当前时间的值，所以我们怎么配置，怎么刷新结果都是(end-start)，其实好像都和当前时间没有关系

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

修改js.png