1.0.2 • Published 1 month ago
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'}"
/>