VUE之倒计时插件（超实用）

安装
1.cnpm/npm

npm install vue2-countdown --save
2.Git 下载源码

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

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

VUE之倒计时插件（超实用）相关推荐

vue日期倒计时插件
下载地址 vue-count-to.js是一款基于vue实现的日期倒计时插件,功能实现:传入两个日期,展示它们两个间隔时间的倒计时.支持天.时分秒.毫秒的展示形式,倒计时结束时触发结束时间,执行结束 ...
vue实现倒计时定时器
前言本文章将发布vue实现倒计时定时器,可用于考试系统自动交卷.商城未付款倒计时取消订单等效果同时,如不清楚vue时间处理,可查看我上一个文章 vue时间处理倒计时定时器为了制作倒计时定时器, ...
jquery倒计时插件可自定义多个倒计时间
jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...
jQuery自适应倒计时插件
jQuery自适应倒计时插件在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
[vue] 组件和插件有什么区别？
[vue] 组件和插件有什么区别? 组件 (Component) 是用来构成你的 App 的业务模块,它的目标是 App.vue.插件 (Plugin) 是用来增强你的技术栈的功能模块,它的目标是 V ...
[vue] 怎么在vue中使用插件？
[vue] 怎么在vue中使用插件? npm 安装然后再main.js 引入最后 vue.use(插件名) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
dedeCMS 静态页面的倒计时插件（原生VS自定义）
文章目录一.动画效果 · 修改前后对比二.修改文件的`路径`&&`名称`: 第一种方法:(自定义封装函数`daojishi()`) 首先: 然后: 第二种方法:(调用系统自带的函数 ...
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互.下面向大家分享8个优秀的 jQuery倒计时插件和教程. jQu ...
vue 右键菜单插件简单、可扩展、样式自定义的右键菜单
今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...
vue连线插件_一起写一个即插即用的 Vue Loading 插件
写在之前实现 Loading 思路上并不困难,只不过是根据请求前后进行设置而已,可当要设置的状态越来越多又不能全局统一设置时,就又变得十分繁琐重复.在 Github 和各个社区站里搜 Loading ...

VUE之倒计时插件（超实用）

VUE之倒计时插件（超实用）相关推荐

最新文章

热门文章