cgygd / vue2-countdown Goto Github PK

View Code? Open in Web Editor NEW

155.0 7.0 60.0 23 KB

基于vue2.0的活动倒计时组件

Home Page: https://cgygd.github.io/vue2-countdown/example/index.html

License: MIT License

Vue 39.72% JavaScript 37.12% HTML 23.16%

vue2-countdown javascript vue2

vue2-countdown's Introduction

vue2-countdown

基于vue2.0的活动倒计时组件
可以使用服务端当前时间
在倒计时开始或者结束的时候,可以自定义回调.
文档：https://cgygd.github.io/vue2-countdown/
demo：https://cgygd.github.io/vue2-countdown/example/index.html

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

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

callBack

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

vue2-countdown's People

Contributors

Stargazers

Watchers

Forkers

sevenegg james-dai rexleimo wyj18761874284 cluo funtasticboy sean529 jaywii dmcdoudou tianlman ithulk cqllang zzf88521 zwq8299174 yutou303 haowenwan hannahchenmumu coolrabbit520 hejiansong laughingzhu superbinlin oyangjinglun cynthiawh88 baiyujie sliy githubzzl grifree jyhaha whf605319646 hhy5277 dpcraft amumubuku shiliuxing qvefofo vitawei geekape webengineergh xietao91 lirifa lcan520 lovemegowin blackcai charac wuxj zhangming gxuebin 3024169080 cc8848 lhz333 yesmori chenghaixing1 akface zhangjianguo1500 shanghui-yu iyangce kuangjile moshanghan luoxubin001 pjyin a2334

vue2-countdown's Issues

currentTime 有时候删除了能正常运行，有时候不运行，也不报错误

你好，倒计时组件，在列表中该如何使用呢

倒计时组件在列表中该如何使用呢？移动端列表有上拉加载和下拉刷新，下拉加载出来的定时器和之前的同步不上。如何单独控制对应的定时器呢

...
else if (this.end > this.current && this.star < this.current || this.star == this.current) {
/**
* 结束时间大于当前并且开始时间小于当前时间，执行活动开始倒计时
*/
this.$set(this, 'tipShow', false);
this.msTime.show = true;
this.$emit('start_callback', this.msTime.show);
setTimeout(() => {
this.runTime(this.end, this.star, this.end_message, true)
}, 1);
}

runTime (startTime, endTime, callFun, type) {}，仅仅按开始与结束时间来进行倒计时，忽略了当前时间点，在两者之间的情况。