zx-countdown 倒计时组件
介绍
zx-countdown是一个功能丰富的倒计时组件，支持天/时/分/秒，可自定义样式，支持毫秒级动画，支持暂停、恢复等操作。
引入方式
<script setup>
import ZxCountdown from '@/components/zx-countdown/zx-countdown.vue';
</script>
<template>
<ZxCountdown :time="3600" />
</template>
基础属性
| 属性名 |
类型 |
默认值 |
说明 |
| time |
Number/String |
0 |
倒计时时长（单位：秒） |
| timestamp |
Number/String |
0 |
目标时间戳，优先级高于time |
| width |
Number |
32 |
数字框宽度 |
| height |
Number |
32 |
数字框高度 |
| borderColor |
String |
'#333' |
数字框边框颜色 |
| backgroundColor |
String |
'#fff' |
数字框背景颜色 |
| size |
Number |
24 |
数字框字体大小 |
| color |
String |
'#333' |
数字框字体颜色 |
| scale |
Boolean |
false |
是否缩放数字(0.9) |
| colonSize |
Number |
28 |
冒号/单位文字大小 |
| colonColor |
String |
'#333' |
冒号/单位文字颜色 |
| days |
Boolean |
false |
是否显示天数 |
| hours |
Boolean |
true |
是否显示小时 |
| minutes |
Boolean |
true |
是否显示分钟 |
| seconds |
Boolean |
true |
是否显示秒数 |
| isColon |
Boolean |
true |
是否使用冒号分隔，false则显示单位文字 |
| unitEn |
Boolean |
false |
单位是否使用英文，仅在seconds启用且isColon为false时有效 |
| returnTime |
Boolean |
false |
是否返回剩余时间事件 |
| isMs |
Boolean |
false |
是否显示毫秒 |
| msWidth |
Number |
32 |
毫秒框宽度 |
| msSize |
Number |
24 |
毫秒字体大小 |
| msColor |
String |
'#333' |
毫秒字体颜色 |
| autoStart |
Boolean |
true |
是否自动开始倒计时 |
| format |
Object |
{} |
自定义格式化文本，如{day:'天',hour:'时',minute:'分',second:'秒'} |
| showZero |
Boolean |
true |
是否显示前导零 |
| interval |
Number |
1000 |
更新频率(毫秒) |
事件
| 事件名 |
回调参数 |
说明 |
| start |
{day,hour,minute,second,seconds} |
倒计时开始时触发 |
| end |
{} |
倒计时结束时触发 |
| time |
{day,hour,minute,second,seconds} |
倒计时进行中触发，需设置returnTime为true |
| pause |
{seconds} |
倒计时暂停时触发 |
| resume |
{seconds} |
倒计时恢复时触发 |
方法
| 方法名 |
参数 |
说明 |
| start |
- |
开始倒计时 |
| pause |
- |
暂停倒计时 |
| resume |
- |
恢复倒计时 |
| stop |
- |
停止倒计时 |
| restart |
- |
重新开始倒计时 |
样式主题
组件内置了多种预设主题样式，可以通过添加以下类名来使用：
| 类名 |
说明 |
| zx-theme-dark |
深色主题 |
| zx-theme-primary |
主色调主题（蓝色） |
| zx-theme-danger |
危险色主题（红色） |
| zx-theme-success |
成功色主题（绿色） |
样式效果
组件还支持以下额外的样式效果：
| 类名 |
说明 |
| zx-flat |
扁平化风格，无边框 |
| zx-rounded |
圆角风格 |
| zx-shadowed |
带阴影效果 |
| zx-number-change |
数字变化动画效果 |
| zx-ripple |
点击涟漪效果 |
| zx-blink |
冒号闪烁效果（用于冒号元素） |
使用方法
基础用法
<ZxCountdown :time="60" />
显示天数
<ZxCountdown :time="86400" :days="true" />
使用文字单位
<ZxCountdown :time="3600" :isColon="false" />
自定义样式
<ZxCountdown
:time="3600"
backgroundColor="#ff4757"
borderColor="#ff4757"
color="#ffffff"
colonColor="#ff4757"
:scale="true"
/>
使用主题
<view class="zx-theme-primary">
<ZxCountdown :time="60" />
</view>
组合样式效果
<view class="zx-theme-danger zx-rounded zx-shadowed">
<ZxCountdown :time="60" />
</view>
显示毫秒
<ZxCountdown :time="60" :isMs="true" />
使用时间戳
<ZxCountdown :timestamp="1640966400000" />
暂停和恢复
<ZxCountdown ref="countdownRef" :time="60" />
<button @click="countdownRef.pause()">暂停</button>
<button @click="countdownRef.resume()">恢复</button>
不自动开始
<ZxCountdown :time="60" :autoStart="false" ref="countdownRef" />
<button @click="countdownRef.start()">开始</button>
自定义格式化文本
<ZxCountdown
:time="3600"
:isColon="false"
:format="{day:'D',hour:'H',minute:'M',second:'S'}"
/>
tanzhenxing