CountDown 倒计时，用于倒计时场景，可手动控制。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

基础使用

通过 value 属性设置剩余时间（单位秒），@end 为倒计时结束事件。

<wui-count-down :value="30" @end="end"></wui-count-down>

const end = (e) => {
    console.log(e)
    Toast('倒计时结束~')
}

手动控制

通过 background 属性设置数字框背景色，color 属性设置数字框字体颜色，colonColor 属性设置冒号颜色，isMs 属性设置是否显示毫秒，msWidth 属性设置毫秒数字框宽度，autoStart 属性设置是否自动开始倒计时。

通过 ref 来注册组件引用信息，引用信息将会注册在父组件的 $refs 对象上。注册完成后，通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。

<wui-count-down background="#333" color="#fff" colonColor="#333" isMs msWidth="40" :value="30" :autoStart="false" @end="end" ref="countdownRef"></wui-count-down>

const countdownRef = ref()
const startCountdown = (e)=> {
    countdownRef.value.startCountdown()
}
//暂停倒计时
const endCountdown = ()=>{
    countdownRef.value.endCountdown(true)
}
//重置倒计时
const resetCountdown = ()=>{
    countdownRef.value.resetCountdown()
}

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
width	Number, String	倒计时数字框宽度，单位rpx，不包含毫秒数字框	40	-
height	Number, String	倒计时数字框高度，单位rpx	40	-
borderColor	String	数字框边框颜色	#333	-
background	String	数字框背景颜色	#fff	-
size	Number, String	数字框字体大小，单位rpx	28	-
color	String	数字框字体颜色	#333	-
colonSize	Number, String	冒号或文字大小，单位rpx	28	-
colonColor	String	冒号或文字颜色	#333	-
value	Number, String	倒计时剩余时间，单位秒（s）	0	-
isDays	Boolean	是否显示天	false	-
isHours	Boolean	是否显示小时	true	-
isMinutes	Boolean	是否显示分钟	true	-
isSeconds	Boolean	是否显示秒数	true	-
unitEn	Boolean	秒数单位用s表示	false	-
isMs	Boolean	是否显示毫秒	false	-
msWidth	Number, String	毫秒数字框宽度，单位rpx	36	-
msSize	Number, String	毫秒数字框字体大小，单位rpx	24	-
msColor	String	毫秒数字框字体颜色，为空则使用 color 属性值	-	-
isColon	Boolean	时分秒是否展示为冒号,为false时显示为文字	true	-
returnTime	Boolean	是否返回剩余时间，为true时，触发@time事件	false	-
autoStart	Boolean	是否自动开始倒计时	true	-

Events

事件名	说明	回调参数
@end	倒计时结束时触发	-
@time	倒计时时间返回，returnTime属性为true时有效	{ seconds:剩余秒数 }

Methods

通过 ref 来注册组件引用信息，引用信息将会注册在父组件的 $refs 对象上。注册完成后，通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。

方法名	说明	传入参数
startCountdown	倒开始计时	-
resetCountdown	重置倒计时	seconds:剩余秒数，不传值则默认使用value值
endCountdown	暂停或结束倒计时	isSuspend:是否为暂停，传true时不触发@end事件