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

安装：

npm install vue2-countdown --save

引入：

//引入插件
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)}
}

使用：

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

参数设置：

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

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

vue日期倒计时插件
下载地址 vue-count-to.js是一款基于vue实现的日期倒计时插件,功能实现:传入两个日期,展示它们两个间隔时间的倒计时.支持天.时分秒.毫秒的展示形式,倒计时结束时触发结束时间,执行结束 ...
用vue实现秒杀倒计时组件
用vue实现秒杀倒计时组件开发思路代码实现下面是使用Vue实现秒杀倒计时组件开发思路 1.请求服务器获取这一刻的服务器时间(统一以服务器时间为基准) 2.获取用户当前电脑时间与服务器时间比对, ...
jquery.countdown 倒计时插件的学习
1.第一种简单的使用第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...
小程序商品列表秒杀倒计时
下面先给大家介绍下vue 设计一个倒计时秒杀的组件 ,具体内容如下所述: 简介: 倒计时秒杀组件在电商网站中层出不穷不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的核心思路: 1.时间 ...
jquery倒计时插件可自定义多个倒计时间
jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互.下面向大家分享8个优秀的 jQuery倒计时插件和教程. jQu ...
榛子云短信-微信小程序60秒倒计时插件
为了帮助开发者更便捷的使用微信小程序的短信验证码功能,特别是初学者更好的使用,榛子云短信特地开发了60秒倒计时插件,效果: 使用方法 1.引入插件countdown.js var CountDown ...
vue实现倒计时定时器
前言本文章将发布vue实现倒计时定时器,可用于考试系统自动交卷.商城未付款倒计时取消订单等效果同时,如不清楚vue时间处理,可查看我上一个文章 vue时间处理倒计时定时器为了制作倒计时定时器, ...
android高仿京东秒杀,Android仿京东首页秒杀倒计时
本文实例为大家分享了Android仿京东首页秒杀倒计时的具体代码,供大家参考,具体内容如下 xml配置 android:layout_width="wrap_content" an ...
前端Vue制作日历插件FullCalendar
前端Vue制作日历插件FullCalendar 官方文档:https://fullcalendar.io/ 效果图安装 Vue2:npm install --save @fullcalendar/v ...

Vue秒杀倒计时插件vue2-countdown

安装：

引入：

使用：

参数设置：

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

最新文章

热门文章