定制软件的网站,中国企业网查询系统官网,wordpress下载页插件下载,网站幻灯片js代码该组件一般使用于某个活动的截止时间上#xff0c;通过数字的变化#xff0c;给用户明确的时间感受#xff0c;提示用户进行某一个行为操作。
#平台差异说明
App#xff08;vue#xff09;App#xff08;nvue#xff09;H5小程序√√√√
#基本使用
通过time参数设置…该组件一般使用于某个活动的截止时间上通过数字的变化给用户明确的时间感受提示用户进行某一个行为操作。
#平台差异说明
AppvueAppnvueH5小程序√√√√
#基本使用
通过time参数设置倒计时间单位为ms
templateu-count-down :time30 * 60 * 60 * 1000 formatHH:mm:ss/u-count-down
/templatecopy
#自定义格式
说明通过绑定change回调的值进行自定义格式
templateu-count-down:time30 * 60 * 60 * 1000formatDD:HH:mm:ssautoStartmillisecondchangeonChangeview classtimetext classtime__item{{ timeData.days }}nbsp;天/texttext classtime__item{{ timeData.hours10?timeData.hours:0timeData.hours}}nbsp;时/texttext classtime__item{{ timeData.minutes }}nbsp;分/texttext classtime__item{{ timeData.seconds }}nbsp;秒/text/view/u-count-down
/templatescriptexport default {data() {return {timeData: {},}},methods: {onChange(e) {this.timeData e}}}
/scriptstyle langscss
.time {include flex;align-items: center;__item {color: #fff;font-size: 12px;text-align: center;}
}
/stylecopy
#毫秒级渲染
通过配置millisecond来开启毫秒级倒计时
u-count-down :time30 * 60 * 60 * 1000 formatHH:mm:ss:SSS autoStart millisecond/u-count-downcopy
#自定义样式
说明通过绑定change回调的值进行自定义格式
templateu-count-down:time30 * 60 * 60 * 1000formatHH:mm:ssautoStartmillisecondchangeonChangeview classtimeview classtime__customtext classtime__custom__item{{ timeData.hours10?timeData.hours:0timeData.hours}}/text/viewtext classtime__doc:/textview classtime__customtext classtime__custom__item{{ timeData.minutes }}/text/viewtext classtime__doc:/textview classtime__customtext classtime__custom__item{{ timeData.seconds }}/text/view/view/u-count-down
/templatescriptexport default {data() {return {timeData: {},}},methods: {onChange(e) {this.timeData e}}}
/scriptstyle langscss
.time {include flex;align-items: center;__custom {margin-top: 4px;width: 22px;height: 22px;background-color: $u-primary;border-radius: 4px;/* #ifndef APP-NVUE */display: flex;/* #endif */justify-content: center;align-items: center;__item {color: #fff;font-size: 12px;text-align: center;}}__doc {color: $u-primary;padding: 0px 4px;}__item {color: #606266;font-size: 15px;margin-right: 4px;}
}
/stylecopy
#手动控制
说明通过绑定ref进行手动控制重置、开始、暂停
templateu-count-downrefcountDown:time3* 1000formatss:SSS:autoStartfalsemillisecondchangeonChange/u-count-downu-button text重置 sizenormal typeinfo clickreset/u-buttonu-button text开始 sizenormal typesuccess clickstart/u-buttonu-button text暂停 sizenormal typeerror clickpause/u-button
/templatescriptexport default {data() {return {timeData: {},}},methods: {//开始start() {this.$refs.countDown.start();},// 暂停pause() {this.$refs.countDown.pause();},// 重置reset() {this.$refs.countDown.reset();},onChange(e) {this.timeData e}}}
/script
