安装

tnpm install --save @alipay/mas-countdown

组件介绍

倒计时组件，支持天，时，分，秒，毫秒倒计时

参数说明

属性|说明|类型|是否必传|默认值 --|:--:|:--:|:--:|:--: showDay|是否显示天|Boolean|否|true showHour|是否显示时|Boolean|否|true showMinute|是否显示分|Boolean|否|true showMilliSecond|是否显示毫秒|Boolean|否|false showColon|是否显示时分秒之间的分割“:”符号, 当false时显示汉字时分秒毫秒|Boolean|否|true secondOnly|是否只显示秒的倒计时过程，不做小时、分钟、天等的换算| Boolean|否|false containerClass|作用于组件最外层的自定义css类名|String|否|'' splitorItemClass|作用于分隔符的自定义css类名|String|否|'' numberItemClass|作用于数字的自定义css类名|String|否|'' day|倒计时天数|Number|否|0 hour|倒计时小时数|Number|否|0 minute|倒计时分钟数|Number|否|0 second|倒计时秒数|Number|否|0 milliSecond|倒计时毫秒数|Number|否|0 interval|倒计时间隔数（毫秒），当需要显示毫秒时默认值为100，不需要显示毫秒时默认值为1000|Number|否|100/1000 onTimeup|倒计时结束回调函数|Function|否|空函数 daysGreaterThan|还剩下XX天显示：「还剩下XX天」文案|Number|否|4 showDayText|开启后大于 daysGreaterThan 天，会显示:「还剩下XX天」文案|Boolean|否|false minDigits | 倒计时中每个元素显示的最小长度 | Number | 否 | 2，即：xx:xx:xx extraData | 传入倒计时组件的额外属性,在onTimeup时透出,适用于列表场景 | Any | 否 | {id: ***}

注意

由于appx2.0的原因变量名称做了修改，将onlySecond改为secondOnly

在小程序中使用

{
  "usingComponents": {
    "mas-countdown": "@alipay/mas-countdown/es/index"
  }
}

调用方式

  <mas-countdown
    minDigits="{{2}}"
    second="{{120}}"
    showDay="{{false}}"
    showHour="{{true}}"
    showMinute="{{true}}"
    showColon="{{false}}"
    onTimeup="onTimeup"
  />

预览

1. 还剩下多少天 demo预览

   页面路径: pages/show-day-text/index

   showDayText设为true, daysGreaterThan要比总的时间少

Badges

[![install size][install-size-image]][install-size-url]