CountDown 倒计时

预览

01:38



---

组件名：rice-count-down

用于实时展示倒计时数值，支持毫秒精度。

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

time 属性表示倒计时总时长，单位为毫秒。

<rice-count-down :time="time" />
<script setup>
  const time = ref(60 * 60 * 30 * 1000)
</script>

自定义格式

format 属性可以设置时间的格式

<rice-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />

毫秒级渲染

millisecond 属性可以开启毫秒级渲染

<rice-count-down :time="time" millisecond format="HH:mm:ss:SSS" />

自定义样式

• color 可以设置文字的颜色
• font-size 可以设置文字的大小

<rice-count-down :time="time2" font-size="17px" color="#f56c6c" />

自定义插槽

可以通过插槽参数自定义样式，current 的格式见下

<rice-count-down :time="time2">
  <template #default="{current}">
    <view class="down-slot">
      <text class="block">{{current.hours<10?'0'+current.hours:current.hours}}</text>
      <text class="colon">:</text>
      <text class="block">{{current.minutes}}</text>
      <text class="colon">:</text>
      <text class="block">{{current.seconds<10?'0'+current.seconds:current.seconds}}</text>
    </view>
  </template>
</rice-count-down>

手动控制

可以调用组件的方法手动控制倒计时

<rice-count-down :time="time3" ref="countDownRef" :auto-start="false" millisecond format="ss:SSS" @finish="onFinish"/>

<rice-grid :column-num="3" icon-size="28px" :custom-style="{marginTop:'16px'}">
  <rice-grid-item icon="play" text="开始" @click="start"></rice-grid-item>
  <rice-grid-item icon="pause" text="暂停" @click="pause"></rice-grid-item>
  <rice-grid-item icon="replay" text="重置" @click="reset"></rice-grid-item>
</rice-grid>

<script setup>
  const countDownRef = ref<RiceCountDownComponentPublicInstance | null>(null)
	const pause = () => {
		countDownRef.value?.pause!()
	}
	const start = () => {
		countDownRef.value?.start!()
	}
	const reset = () => {
		countDownRef.value?.reset!()
	}
	const onFinish = () => {
		uni.showToast({
			title: '倒计时结束',
			icon: 'none'
		})
	}
</script>

API

Props

属性名	类型	说明	默认值
time	Number	倒计时时长，单位毫秒，	-
format	String	时间格式，默认 HH:mm:ss	-
auto-start	Boolean	是否自动开始倒计时，默认true	-
millisecond	Boolean	是否开启毫秒级渲染，默认 false	-
font-size	String|Number	字体大小	-
color	String	字体颜色	-
custom-style	Object	自定义样式	-

Event

事件名	说明	回调参数
change	倒计时改变时触发	(current:CurrentTime)
finish	倒计时结束时触发	-

slots

名称	说明	参数
default	自定义内容	( current : CurrentTime)

类型定义

 type CurrentTime = {
	days : number,
	hours : number,
	minutes : number,
	seconds : number,
	milliseconds : number,
	remainTime : number,
};

组件导出如下类型

const countDownRef=ref<RiceCountDownComponentPublicInstance|null>(null)