倒计时组件

组件名称

ux-count-down

运行图示

组件属性

属性名称	类型	默认值	作用
customClass	Array	['ux-primary-text']	计时区块样式
borderColor	String	#FFFFFF	计时区块边框颜色
size	Number	26	计时区块文本尺寸，单位 rpx
lineHeight	Number	1.8	计时区块行高
splitorClass	Array	['ux-primary-text']	分隔符样式
splitorText	Array	['天', '时', '分', '秒']	分隔符文本
timer	String	''	目标时间，格式 YYYY-mm-dd HH:ii:ss，可以利用 uxts 工具快速转换。
show	Boolean	true	是否展示组件
zeroShow	Boolean	true	为 0 展示
spacing	String	0rpx	计时区块间距
padding	Number	5	元素内间距，单位 rpx
borderRadius	String	8rpx	组件元素圆角尺寸

组件方法

01. reSetTimer(timer:string) 重置倒计时时间，参数 : 新的时间；
02. getTimeRemaining() 获取倒计时剩余的秒数；

组件事件

@endDo 倒计时结束时触发

演示代码

<template>
	<view class="ux-body ux-page-color ux-flex1">
		<text class="ux-h6 ux-color-grey ux-mt-large">文字形式</text>
		<view class="ux-flex ux-row ux-justify-content-center ux-mt-small ux-bg-white ux-padding-small">
			<ux-count-down 
			:padding="0" 
			:timer="time1"></ux-count-down>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt-large">边框样式</text>
		<view class="ux-flex ux-row ux-justify-content-center ux-mt-small ux-bg-white ux-padding-small">
			<ux-count-down 
			:timer="time1"
			:customClass="['ux-color-blue']" 
			:splitorClass="['ux-color-blue']" 
			:size="22" 
			borderColor="#008AFF"
			spacing="5rpx"></ux-count-down>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt-large">背景样式</text>
		<view class="ux-flex ux-row ux-justify-content-center ux-mt-small ux-bg-white ux-padding-small">
			<ux-count-down 
			:timer="time1"
			:customClass="['ux-color-white', 'ux-bg-primary']" 
			:splitorClass="['ux-color-grey2']" 
			:size="25" 
			borderColor="#3688FF" 
			spacing="5rpx" 
			@endDo="endDo"></ux-count-down>
		</view>
	</view>
</template>
<script lang="uts">
import UXDatetime from "@/uni_modules/unix-ui/uxts/datetime.uts";
var uxDatetime = new UXDatetime();
export default {
	data() {
		return {
			// 初始化倒计时
			// 一小时后
			time1 : uxDatetime.nowString(1000 * 3600), 
		}
	},
	methods: {
		endDo : function () {
			console.log('倒计时结束');
		}
	}
}
</script>
<style scoped>
</style>