注册 X
提交 注:点击提交后系统会发送邮件到邮箱验证!(仅支持中国大陆邮箱)
我已阅读并同意 服务条款
首页 > IT技术笔记 > 查看笔记

vant-CountDown 倒计时

介绍

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

引入

        
        
      

代码演示

基础用法

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

        
        
      

        
        
      

自定义格式

通过 `format` 属性设置倒计时文本的内容。

        
        
      

毫秒级渲染

倒计时默认每秒渲染一次,设置 `millisecond` 属性可以开启毫秒级渲染。

        
        
      

自定义样式

通过插槽自定义倒计时的样式,`timeData` 对象格式见下方表格。

        
        
      

手动控制

通过 ref 获取到组件实例后,可以调用 `start`、`pause`、`reset` 方法。

        
        
      

        
        
      

API

Props

参数说明类型默认值
time倒计时时长,单位毫秒number / string0
format时间格式stringHH:mm:ss
auto-start是否自动开始倒计时booleantrue
millisecond是否开启毫秒级渲染booleanfalse

format 格式

格式说明
DD天数
HH小时
mm分钟
ss秒数
S毫秒(1 位)
SS毫秒(2 位)
SSS毫秒(3 位)

Events

事件名说明回调参数
finish倒计时结束时触发-
change倒计时变化时触发timeData: TimeData

Slots

名称说明参数
default自定义内容timeData: TimeData

TimeData 格式

名称说明类型
days剩余天数number
hours剩余小时number
minutes剩余分钟number
seconds剩余秒数number
milliseconds剩余毫秒number

方法

通过 ref 可以获取到 CountDown 实例并调用实例方法,详见

组件实例方法

方法名说明参数返回值
start开始倒计时--
pause暂停倒计时--
reset重设倒计时,若 auto-starttrue,重设后会自动开始倒计时--

样式变量

组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考

主题定制

名称默认值描述
@count-down-text-color@text-color-
@count-down-font-size@font-size-md-
@count-down-line-height@line-height-md-

常见问题

在 iOS 系统上倒计时不生效?

如果你遇到了在 iOS 上倒计时不生效的问题,请确认在创建 Date 对象时没有使用`new Date('2020-01-01')`这样的写法,iOS 不支持以中划线分隔的日期格式,正确写法是`new Date('2020/01/01')`。

对此问题的详细解释:

stackoverflow


效果图:


 打赏        分享



评论

邮箱: 昵称: