低代码高性能原生UI框架

Appearance

本页导读

CountDown 倒计时 ​

组件类型：UxCountdownComponentPublicInstance

支持时分秒倒计时，可配置时间格式、自定义样式、毫秒倒计时

平台兼容性 ​

AndroidiOSweb鸿蒙 Next小程序
√√√xx

Props ​

属性名类型默认值说明
themeStringprimary主题颜色
timeNumber0倒计时时长，单位ms
formatStringHH:mm:ss时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒
autoplayBooleantrue设置数值后是否自动开始滚动
millisecondBooleanfalse是否展示毫秒倒计时
colorString$ux.Conf.fontColor字体颜色
darkColorString-深色
sizeNumber$ux.Conf.fontSize字体大小
boldBooleanfalse字体是否加粗

theme ​

值说明
primary主色
warning警告
success成功
error错误
info文本

darkColor ​

值说明
none不显示
auto自动适配深色模式
color其他颜色

Events ​

事件名说明参数
finish倒计时结束时触发event: Function
change倒计时变化时触发event: Function

示例代码 ​

html
<template>
	<ux-page>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag" title="倒计时" :bold="true">
				<ux-text text="支持时分秒倒计时，可配置时间格式、自定义样式、毫秒倒计时"></ux-text>
				<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
					<ux-text text="详细文档："></ux-text>
					<ux-text style="flex: 1" name="倒计时" text="https://www.uxframe.cn/component/display/countdown.html" mode="link"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
				<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
				<ux-col>
					<ux-countdown theme="success" :time="5 * 60 * 1000"></ux-countdown>
					<ux-countdown theme="warning" :time="5 * 60 * 1000" :mt="10"></ux-countdown>	
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="时间格式化" :bold="true">
				<ux-text text="支持时间格式化，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒" :mb="15"></ux-text>
				<ux-col>
					<ux-countdown :time="2 * 24 * 60 * 60 * 1000" format="DD:HH:mm:ss" @change="onChange">
						<ux-text :text="`${timeData.days} 天 ${timeData.hours} 时 ${timeData.minutes} 分 ${timeData.seconds} 秒`"></ux-text>
					</ux-countdown>	
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="毫秒级" :bold="true">
				<ux-text text="支持毫秒级倒计时" :mb="15"></ux-text>
				<ux-col>
					<ux-countdown :time="5 * 60 * 1000" format="HH:mm:ss:SSS" :millisecond="true" color="red" :bold="true">
						<template v-slot="data">
							<ux-text :text="`${data.times.days}:${data.times.hours}:${data.times.minutes}:${data.times.seconds}:${data.times.milliseconds}`"></ux-text>
						</template>
					</ux-countdown>	
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="自定义样式" :bold="true">
				<ux-text text="通过插槽可随意定义样式" :mb="15"></ux-text>
				<ux-col>
					<ux-countdown :time="5 * 60 * 1000" format="HH:mm:ss">
						<view class="time">
							<view class="box">
								<text class="text">{{ timeData.hours }}</text>
							</view>
							<text class="symbol">:</text>
							<view class="box">
								<text class="text">{{ timeData.minutes }}</text>
							</view>
							<text class="symbol">:</text>
							<view class="box">
								<text class="text">{{ timeData.seconds }}</text>
							</view>
						</view>
					</ux-countdown>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="自由控制" :bold="true">
				<ux-text text="支持控制动画播放" :mb="15"></ux-text>
				<ux-col>
					<ux-countdown ref="uxCountdownRef" :size="16" :time="24 * 60 * 60 * 1000" :autoplay="false"></ux-countdown>
					
					<ux-button theme="primary" :mt="10" text="开始" @click="start"></ux-button>
					<ux-button theme="success" :mt="10" text="暂停" @click="pause"></ux-button>
					<ux-button theme="warning" :mt="10" text="重置" @click="reset"></ux-button>
				</ux-col>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>
<template>
	<ux-page>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag" title="倒计时" :bold="true">
				<ux-text text="支持时分秒倒计时，可配置时间格式、自定义样式、毫秒倒计时"></ux-text>
				<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
					<ux-text text="详细文档："></ux-text>
					<ux-text style="flex: 1" name="倒计时" text="https://www.uxframe.cn/component/display/countdown.html" mode="link"></ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
				<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
				<ux-col>
					<ux-countdown theme="success" :time="5 * 60 * 1000"></ux-countdown>
					<ux-countdown theme="warning" :time="5 * 60 * 1000" :mt="10"></ux-countdown>	
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="时间格式化" :bold="true">
				<ux-text text="支持时间格式化，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒" :mb="15"></ux-text>
				<ux-col>
					<ux-countdown :time="2 * 24 * 60 * 60 * 1000" format="DD:HH:mm:ss" @change="onChange">
						<ux-text :text="`${timeData.days} 天 ${timeData.hours} 时 ${timeData.minutes} 分 ${timeData.seconds} 秒`"></ux-text>
					</ux-countdown>	
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="毫秒级" :bold="true">
				<ux-text text="支持毫秒级倒计时" :mb="15"></ux-text>
				<ux-col>
					<ux-countdown :time="5 * 60 * 1000" format="HH:mm:ss:SSS" :millisecond="true" color="red" :bold="true">
						<template v-slot="data">
							<ux-text :text="`${data.times.days}:${data.times.hours}:${data.times.minutes}:${data.times.seconds}:${data.times.milliseconds}`"></ux-text>
						</template>
					</ux-countdown>	
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="自定义样式" :bold="true">
				<ux-text text="通过插槽可随意定义样式" :mb="15"></ux-text>
				<ux-col>
					<ux-countdown :time="5 * 60 * 1000" format="HH:mm:ss">
						<view class="time">
							<view class="box">
								<text class="text">{{ timeData.hours }}</text>
							</view>
							<text class="symbol">:</text>
							<view class="box">
								<text class="text">{{ timeData.minutes }}</text>
							</view>
							<text class="symbol">:</text>
							<view class="box">
								<text class="text">{{ timeData.seconds }}</text>
							</view>
						</view>
					</ux-countdown>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="自由控制" :bold="true">
				<ux-text text="支持控制动画播放" :mb="15"></ux-text>
				<ux-col>
					<ux-countdown ref="uxCountdownRef" :size="16" :time="24 * 60 * 60 * 1000" :autoplay="false"></ux-countdown>
					
					<ux-button theme="primary" :mt="10" text="开始" @click="start"></ux-button>
					<ux-button theme="success" :mt="10" text="暂停" @click="pause"></ux-button>
					<ux-button theme="warning" :mt="10" text="重置" @click="reset"></ux-button>
				</ux-col>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>
ts
<script setup>
	import { UXCountDownTime } from '@/uni_modules/ux-frame/libs/types/types.uts'
	
	let title = ''
	
	const timeData = ref<UXCountDownTime>({
		days: 0,
		hours: 0,
		minutes: 0,
		seconds: 0,
		milliseconds: 0
	} as UXCountDownTime)
	
	const uxCountdownRef = ref<UxCountdownComponentPublicInstance | null>(null)
	
	onLoad((e: OnLoadOptions) => {
		title = e['title'] ?? ''
	})
	
	function onChange(e: UXCountDownTime) {
		timeData.value = e
	}
	
	function start() {
		uxCountdownRef.value!.start()
	}
	
	function pause() {
		uxCountdownRef.value!.pause()
	}
	
	function reset() {
		uxCountdownRef.value!.reset()
	}
</script>
<script setup>
	import { UXCountDownTime } from '@/uni_modules/ux-frame/libs/types/types.uts'
	
	let title = ''
	
	const timeData = ref<UXCountDownTime>({
		days: 0,
		hours: 0,
		minutes: 0,
		seconds: 0,
		milliseconds: 0
	} as UXCountDownTime)
	
	const uxCountdownRef = ref<UxCountdownComponentPublicInstance | null>(null)
	
	onLoad((e: OnLoadOptions) => {
		title = e['title'] ?? ''
	})
	
	function onChange(e: UXCountDownTime) {
		timeData.value = e
	}
	
	function start() {
		uxCountdownRef.value!.start()
	}
	
	function pause() {
		uxCountdownRef.value!.pause()
	}
	
	function reset() {
		uxCountdownRef.value!.reset()
	}
</script>
css
<style lang="scss">
	.time {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	
		.box {
			margin-top: 4px;
			width: 22px;
			height: 22px;
			background-color: blue;
			border-radius: 4px;
			display: flex;
			justify-content: center;
			align-items: center;
	
			.text {
				color: #fff;
				font-size: 12px;
				text-align: center;
			}
		}
		
		.symbol {
			color: blue;
			padding: 0px 4px;
		}
	}
</style>
<style lang="scss">
	.time {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	
		.box {
			margin-top: 4px;
			width: 22px;
			height: 22px;
			background-color: blue;
			border-radius: 4px;
			display: flex;
			justify-content: center;
			align-items: center;
	
			.text {
				color: #fff;
				font-size: 12px;
				text-align: center;
			}
		}
		
		.symbol {
			color: blue;
			padding: 0px 4px;
		}
	}
</style>