# 倒计时

countdown :天、时、分、秒倒计时,支持单独秒数,支持设置大小,颜色等

# 组件结构

<template>
	<view class="tui-countdown-box">
		<view class="tui-countdown-item" :style="{ background: backgroundColor, borderColor: borderColor, width: getWidth(d, width) + 'rpx', height: height + 'rpx' }" v-if="days">
			<view class="tui-countdown-time" :class="[scale ? 'tui-countdown-scale' : '']" :style="{ fontSize: size + 'rpx', color: color, lineHeight: size + 'rpx' }">
				{{ d }}
			</view>
		</view>
		<view
			class="tui-countdown-colon"
			:class="{ 'tui-colon-pad': borderColor == 'transparent' }"
			:style="{ lineHeight: colonSize + 'rpx', fontSize: colonSize + 'rpx', color: colonColor }"
			v-if="days"
		>
			{{ isColon ? ':' : '天' }}
		</view>
		<view class="tui-countdown-item" :style="{ background: backgroundColor, borderColor: borderColor, width: getWidth(h, width) + 'rpx', height: height + 'rpx' }" v-if="hours">
			<view class="tui-countdown-time" :class="[scale ? 'tui-countdown-scale' : '']" :style="{ fontSize: size + 'rpx', color: color, lineHeight: size + 'rpx' }">
				{{ h }}
			</view>
		</view>
		<view
			class="tui-countdown-colon"
			:class="{ 'tui-colon-pad': borderColor == 'transparent' }"
			:style="{ lineHeight: colonSize + 'rpx', fontSize: colonSize + 'rpx', color: colonColor }"
			v-if="hours"
		>
			{{ isColon ? ':' : '时' }}
		</view>
		<view
			class="tui-countdown-item"
			:style="{ background: backgroundColor, borderColor: borderColor, width: getWidth(i, width) + 'rpx', height: height + 'rpx' }"
			v-if="minutes"
		>
			<view class="tui-countdown-time" :class="[scale ? 'tui-countdown-scale' : '']" :style="{ fontSize: size + 'rpx', color: color, lineHeight: size + 'rpx' }">
				{{ i }}
			</view>
		</view>
		<view
			class="tui-countdown-colon"
			:class="{ 'tui-colon-pad': borderColor == 'transparent' }"
			:style="{ lineHeight: colonSize + 'rpx', fontSize: colonSize + 'rpx', color: colonColor }"
			v-if="minutes"
		>
			{{ isColon ? ':' : '分' }}
		</view>
		<view
			class="tui-countdown-item"
			:style="{ background: backgroundColor, borderColor: borderColor, width: getWidth(s, width) + 'rpx', height: height + 'rpx' }"
			v-if="seconds"
		>
			<view class="tui-countdown-time" :class="[scale ? 'tui-countdown-scale' : '']" :style="{ fontSize: size + 'rpx', color: color, lineHeight: size + 'rpx' }">
				{{ s }}
			</view>
		</view>
		<view
			class="tui-countdown-colon"
			:class="{ 'tui-colon-pad': borderColor == 'transparent' }"
			:style="{ lineHeight: colonSize + 'rpx', fontSize: colonSize + 'rpx', color: colonColor }"
			v-if="seconds && !isColon"
		>
			{{ unitEn ? 's' : '秒' }}
		</view>
	</view>
</template>

# 组件脚本

<script>
	export default {
		name: "tuiCountdown",
		
		...省略n行
		
	}
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
width Number 数字框宽度 25
height Number 数字框高度 25
borderColor String 数字框border颜色 #333
backgroundColor String 数字框背景颜色 #fff
size Number 数字框字体大小 24
color String 数字框字体颜色 #333
scale Boolean 是否缩放 0.9 false
colonSize Number 冒号大小 28
colonColor String 冒号颜色 #333
time Number 剩余时间 (单位:秒) 0
days Boolean 是否包含天 false
hours Boolean 是否包含小时 true
minutes Boolean 是否包含分钟 true
seconds Boolean 是否包含秒 true
unitEn Boolean 单位用英文缩写表示 仅seconds秒数有效 false
isColon Boolean 是否展示为冒号,false为文字 true
returnTime Boolean 是否返回剩余时间 false

# methods

名称 描述
@end 倒计时结束事件
@time 返回剩余时间事件,每秒返回

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/countdown/countdown

# H5二维码

# 小程序二维码