@mas.io/mas-countdown

安装

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]

---