vue2-countdown

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

示例.png

安装

1.cnpm/npm

npm install vue2-countdown --save

2.Git 下载源码

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

使用

<count-down v-on:end_callback="countDownE_cb()":currentTime="currentTime":startTime="startTime":endTime="endTime":tipText="'距离订单开始还有'":tipTextEnd="'距离订单关闭还剩'":endText="'订单已关闭'":dayTxt="'天'":hourTxt="'小时'":minutesTxt="'分钟'":secondsTxt="'秒'">
</count-down>

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文件，将注释消除。

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

2.倒计时逻辑问题

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

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

Vue 倒计时插件 vue2-countdown相关推荐

vue 倒计时插件_Vue学习笔记-倒计时插件
安装 1.cnpm/npm npm install vue2-countdown --save 2.Git 下载源码 git clone https://github.com/cgygd/vue2-c ...
vue 倒计时插件_vue中实现倒计时组件与毫秒效果
时分秒倒计时组件 template {{ getHours1 }} {{ getHours2 }} : {{ getMinutes1 }} {{ getMinutes2 }} : {{ getSeco ...
jquery.countdown 倒计时插件的学习
1.第一种简单的使用第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...
vue日期倒计时插件
下载地址 vue-count-to.js是一款基于vue实现的日期倒计时插件,功能实现:传入两个日期,展示它们两个间隔时间的倒计时.支持天.时分秒.毫秒的展示形式,倒计时结束时触发结束时间,执行结束 ...
jquery倒计时插件可自定义多个倒计时间
jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...
实用VUE 开发插件！！前端必备
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互.下面向大家分享8个优秀的 jQuery倒计时插件和教程. jQu ...
榛子云短信-微信小程序60秒倒计时插件
为了帮助开发者更便捷的使用微信小程序的短信验证码功能,特别是初学者更好的使用,榛子云短信特地开发了60秒倒计时插件,效果: 使用方法 1.引入插件countdown.js var CountDown ...
Vue倒计时动画效果
这一次在b站看到一个博主做的一个倒计时的动画效果,跟着做了一下.以下是对此次项目的一些记录与总结. 该项目效果链接:Vue倒计时 HTML部分: <div id="app"& ...
好用的vue组件插件及框架
实用的vue插件大汇总 Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总 ...

Vue 倒计时插件 vue2-countdown

vue2-countdown

安装

使用

参数解释

回调方法

问题修改

Vue 倒计时插件 vue2-countdown相关推荐

最新文章

热门文章