1.0.3 • Published 2 years ago
@mas.io/mas-countdown v1.0.3
安装
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"
/>预览
还剩下多少天 demo预览
页面路径: pages/show-day-text/index
showDayText设为true, daysGreaterThan要比总的时间少
Badges
