基于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 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
element中的$confirm的使用
Apr 26 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
php编写简单的文章发布程序
2015/06/18 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
浅谈php://filter的妙用
2019/03/05 PHP
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
js中this对象用法分析
2018/01/05 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
Python CSV模块使用实例
2015/04/09 Python
Python使用django搭建web开发环境
2017/06/09 Python
django定期执行任务(实例讲解)
2017/11/03 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
flask框架路由常用定义方式总结
2019/07/23 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
Python调用.NET库的方法步骤
2019/12/27 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
应聘自荐信
2013/12/14 职场文书
我的网上商城创业计划书
2013/12/26 职场文书
保护动物倡议书
2014/04/15 职场文书
中学生打架检讨书
2014/10/13 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
解析Java异步之call future
2021/06/14 Java/Android