低代码高性能原生UI框架

Appearance

本页导读

Countdown ​

组件类型：UxCountdownComponentPublicInstance

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

平台兼容性 ​

UniApp X ​

AndroidiOSweb鸿蒙 Next小程序
√√√x√

UniApp Vue Nvue ​

AndroidiOSweb鸿蒙 Next小程序
xx√xx

Props ​

属性名类型默认值说明
themeStringinfo主题
reverseBooleanfalse反向正计时
timeNumber0倒计时时长，单位ms
formatStringHH:mm:ss时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒
autoplayBooleantrue设置数值后是否自动开始滚动
millisecondBooleanfalse是否展示毫秒倒计时
colorString$ux.Conf.fontColor字体颜色
darkColorString深色none-不显示，auto-自动适配深色模式，其他-颜色
sizeAny$ux.Conf.fontSize字体大小
boldBooleanfalse字体是否加粗
marginArray边距[上右下左][上下左右][上下左右]
mtAny距上单位px
mrAny距右单位px
mbAny距下单位px
mlAny距左单位px
paddingArray填充[上右下左][上下左右][上下左右]
ptAny上内边距单位px
prAny右内边距单位px
pbAny下内边距单位px
plAny左内边距单位px
xstyleArray自定义样式

theme ​

值说明
text文字
info默认
primary主要
success成功
warning警告
error错误

darkColor ​

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

Events ​

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

示例代码 ​

html
<template>
	<ux-page :stack="showDoc">
		<ux-navbar :title="title" :bold="true">
			<template v-slot:right>
				<!-- #ifndef MP -->
				<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
				<!-- #endif -->
			</template>
		</ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="倒计时" :bold="true">
				<ux-text text="支持时分秒倒计时，可配置时间格式、自定义样式、毫秒倒计时"></ux-text>
			</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="2 * 24 * 60 * 60 * 1000" format="DD:HH:mm:ss" :reverse="true">
						<template v-slot="data">
							<ux-text :text="`${data.times.days} 天 ${data.times.hours} 时 ${data.times.minutes} 分 ${data.times.seconds} 秒`"></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: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="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>
<template>
	<ux-page :stack="showDoc">
		<ux-navbar :title="title" :bold="true">
			<template v-slot:right>
				<!-- #ifndef MP -->
				<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
				<!-- #endif -->
			</template>
		</ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="倒计时" :bold="true">
				<ux-text text="支持时分秒倒计时，可配置时间格式、自定义样式、毫秒倒计时"></ux-text>
			</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="2 * 24 * 60 * 60 * 1000" format="DD:HH:mm:ss" :reverse="true">
						<template v-slot="data">
							<ux-text :text="`${data.times.days} 天 ${data.times.hours} 时 ${data.times.minutes} 分 ${data.times.seconds} 秒`"></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: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="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>
ts
<script setup>
	
	import * as plus from '@/uni_modules/ux-plus'
	import { UxCountDownTime } from '@/uni_modules/ux-frame'
	
	const title = ref('')
	
	const timeData = ref<UxCountDownTime>({
		days: 0,
		hours: 0,
		minutes: 0,
		seconds: 0,
		milliseconds: 0
	} as UxCountDownTime)
	
	const uxCountdownRef = ref<UxCountdownComponentPublicInstance | null>(null)
	
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/countdown.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	onLoad((e: OnLoadOptions) => {
		title.value = 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 * as plus from '@/uni_modules/ux-plus'
	import { UxCountDownTime } from '@/uni_modules/ux-frame'
	
	const title = ref('')
	
	const timeData = ref<UxCountDownTime>({
		days: 0,
		hours: 0,
		minutes: 0,
		seconds: 0,
		milliseconds: 0
	} as UxCountDownTime)
	
	const uxCountdownRef = ref<UxCountdownComponentPublicInstance | null>(null)
	
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/countdown.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	onLoad((e: OnLoadOptions) => {
		title.value = 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>