基于vue2.0的活动倒计时组件countdown
栏目: JavaScript · 发布时间: 7年前
内容简介:这是一款基于vue2.0的活动倒计时组件,可以使用服务端时间作为当前时间,在倒计时开始和结束时可以自定义回调函数。
这是一款基于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》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 悟空活动中台:微组件状态管理(上)
- 悟空活动中台:微组件状态管理(上)
- 悟空活动中台:微组件多端探索
- Hermit(隐士)活动续:继续针对朝鲜半岛进行的APT攻击活动
- 巨杉TechDay:云时代的数据库架构设计与演进 预约报名-巨杉技术社区活动-活动行
- 团队建设活动:巅峰故事
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Web Data Mining
Bing Liu / Springer / 2011-6-26 / CAD 61.50
Web mining aims to discover useful information and knowledge from Web hyperlinks, page contents, and usage data. Although Web mining uses many conventional data mining techniques, it is not purely an ......一起来看看 《Web Data Mining》 这本书的介绍吧!