ui-time 倒计时组件

版本：v2.3.11

倒计时组件用于显示天、时、分、秒的倒计时，支持自定义样式、缩放效果、倒计时结束事件等。

基本使用

<template>
  <view>
    <!-- 默认样式 -->
    <ui-time :time="1000" />
  </view>
</template>

<script setup>
// time 单位为秒
// 1000秒 = 约16分钟40秒
</script>

Props

参数	类型	默认值	说明
time	Number	0	剩余时间，单位：秒
width	Number	24	数字框宽度，单位：rpx
height	Number	24	数字框高度，单位：rpx
bcolor	String	'#333'	数字框边框颜色
bgcolor	String	'#fff'	数字框背景颜色
size	Number	24	数字框字体大小，单位：rpx
color	String	'#333'	数字框字体颜色
scale	Boolean	false	是否启用缩放效果
colon-size	Number	28	冒号大小，单位：rpx
colon-color	String	'#333'	冒号颜色
days	Boolean	false	是否显示天数
hours	Boolean	true	是否显示小时
minutes	Boolean	true	是否显示分钟
seconds	Boolean	true	是否显示秒
is-colon	Boolean	true	是否显示冒号分隔符

Events

事件名	说明	回调参数
end	倒计时结束时触发	-

使用示例

倒计时结束事件

<template>
  <ui-time :time="19" @end="onTimeEnd" />
</template>

<script setup>
const onTimeEnd = () => {
  console.log('倒计时结束')
}
</script>

背景样式

白色背景

<ui-time :time="2000" bcolor="#fff" />

红色主题

<ui-time :time="1000" color="#fff" bcolor="#e41f19" bgcolor="#e41f19" colon-color="#e41f19" />

透明背景

<ui-time :time="2000" bcolor="transparent" bgcolor="transparent" color="#e41f19" colon-color="#e41f19" />

尺寸修改

迷你尺寸

<ui-time :time="240000" :height="20" :width="20" :size="16" :colon-size="20" />

中等尺寸

<ui-time :time="240000" :height="30" :width="30" :size="26" :colon-size="32" />

大尺寸

<ui-time :time="240000" :height="40" :width="40" :size="36" :colon-size="42" />

时间显示控制

显示天数

<ui-time :time="240000" :days="true" :is-colon="false" />

隐藏小时（仅分秒）

<ui-time :time="3000" :hours="false" />

仅显示秒

<ui-time :time="240000" :hours="false" :minutes="false" />

无冒号样式

<ui-time :time="240000" :is-colon="false" />

自定义颜色主题

橙色主题

<ui-time :time="240000" color="#ff6b00" bcolor="#ff6b00" bgcolor="#ffe8d6" colon-color="#ff6b00" :scale="true" />

蓝色主题

<ui-time :time="240000" color="#1989fa" bcolor="#1989fa" bgcolor="#e6f0ff" colon-color="#1989fa" :scale="true" />

绿色主题

<ui-time :time="240000" color="#07c160" bcolor="#07c160" bgcolor="#e3f9ed" colon-color="#07c160" :scale="true" />

长倒计时

显示天数（无冒号）

<ui-time :time="864000" :days="true" :scale="true" :is-colon="false" />

显示天数（带冒号）

<ui-time :time="864000" :days="true" :scale="true" />

特殊场景

深色背景白色文字

<view style="background-color: #333; padding: 20rpx; border-radius: 10rpx;">
  <ui-time :time="240000" color="#fff" bcolor="#666" bgcolor="#444" colon-color="#fff" :scale="true" />
</view>

简洁模式（无边框）

<ui-time :time="240000" bcolor="transparent" bgcolor="transparent" :scale="true" color="#333" colon-color="#999" />

促销红色主题

<ui-time :time="240000" color="#fff" bcolor="#e41f19" bgcolor="#e41f19" colon-color="#fff" :scale="true" :height="36" :width="36" :size="32" :colon-size="38" />

常见场景

秒杀活动

<ui-time :time="3600" color="#fff" bcolor="#e41f19" bgcolor="#e41f19" colon-color="#fff" :scale="true" :is-colon="false" />

活动倒计时

<ui-time :time="864000" :days="true" :scale="true" />

限时优惠

<ui-time :time="1800" :hours="false" :scale="true" color="#e41f19" bcolor="#e41f19" colon-color="#e41f19" />

平台兼容性

平台	支持情况
H5	✅ 支持
微信小程序	✅ 支持
支付宝小程序	✅ 支持
百度小程序	✅ 支持
字节跳动小程序	✅ 支持
QQ小程序	✅ 支持
APP	✅ 支持

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/time/time