基于vue2.0的活动倒计时组件countdown(附源码下载)


Posted in Javascript onOctober 09, 2018

这是一款基于vue2.0的活动倒计时组件,可以使用服务端时间作为当前时间,在倒计时开始和结束时可以自定义回调函数。

 

查看演示       下载源码

安装

npm install vue2-countdown --save

使用组件

首先在模板部分添加:

<template>
 <div>
<count-down 
 v-on:start_callback="countDownS_cb(1)" 
 v-on:end_callback="countDownE_cb(1)" 
 :currentTime="1538983555" 
 :startTime="1538983555" 
 :endTime="1538983565" 
 :dayTxt="'天'" 
 :hourTxt="'小时'" 
 :minutesTxt="'分钟'" 
 :secondsTxt="'秒'">
 </count-down>
</div>
</template>

然后在js部分:

<script>
import CountDown from 'vue2-countdown'

export default {
 components: {
  CountDown
 },
 methods: {
  countDownS_cb: function (x) {
   console.log(x)
  },
  countDownE_cb: function (x) {
   console.log(x)
  }
 }
}
</script>

选项

名称 默认值 描述
currentTime ( new Date() ).getTime() 当前时间戳,如果不传,默认获取用户本地的时间(建议传服务器的当前时间)
startTime 开始时间戳,必需
endTime 结束时间戳,必需
tipText 距离开始 开始倒计时之前的提示文字
tipTextEnd 距离结束 开始倒计时之后的提示文字
endText 已结束 倒计时结束之后的提示文字
dayTxt : 自定义显示的天数文字
hourTxt : 自定义显示的小时文字
secondsTxt : 自定义显示的分钟文字
secondsFixed : 自定义显示的秒数文字

回调函数

名称 默认值 描述
start_callback 开始倒计时结束之后的回调方法
end_callback 活动倒计时结束之后的回调方法

总结

以上所述是小编给大家介绍的基于vue2.0的活动倒计时组件countdown(附源码下载),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
Vue中的$set的使用实例代码
Oct 08 #Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 #Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 #Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 #Javascript
angularJs提交文本框数据到后台的方法
Oct 08 #Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 #Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 #Javascript
You might like
PHP安全配置
2006/12/06 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
jQuery 选择器理解
2010/03/16 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
python将ip地址转换成整数的方法
2015/03/17 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
土木工程专业自荐信
2013/10/04 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
稽核岗位职责
2015/02/10 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
餐馆开业致辞
2015/08/01 职场文书