1.0.3 • Published 5 years ago
@mas.io/adc-stepper v1.0.3
安装
tnpm install --save @alipay/adc-stepper组件介绍
能力中心小程序步进器组件，支持长按增加 减少。
参数说明
| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 |
|---|---|---|---|---|---|
| value | 否 | number | 步进器中的值 | 0 | 3 |
| step | 否 | number | 每次点击时减少的值 | 1 | 3 |
| max | 否 | number | 步进器最大值 | 10000 | 300 |
| min | 否 | number | 步进器最小值 | 0 | 2 |
| activeColor | 否 | string | 字体颜色 | #FA8B12 | #FA8B12 |
| disabledColor | 否 | string | 不可点击字体颜色 | #C8C7CC | #C8C7CC |
| index | 否 | number | 当前数据的索引 | 0 | 1 |
| delayed | 否 | number | 延迟执行时间，作用于长按增加/减少 | 200（ms） | 100 |
| inpWidth | 否 | string | 输入框宽度 | 100rpx | 60rpx |
| height | 否 | string | 步进器高度 | 60rpx | 50rpx |
| btnWidth | 否 | string | 按钮宽度 | 60rpx | 50rpx |
| borderRadius | 否 | string | 步进器圆角 | 10rpx | 6rpx |
| borderColor | 否 | string | 步进器border颜色 | #e4e4e4 | #000 |
| disabled | 否 | Boolean | 是否禁用步进器 | false | true |
| disablePlus | 否 | Boolean | 是否禁用增加按钮 | false | true |
| disableMinus | 否 | Boolean | 是否禁用减少按钮 | false | true |
| disableInput | 否 | Boolean | 是否禁用输入框 | false | true |
| async | 否 | Boolean | 异步变更 | false | true |
| onCountHandle | 否 | Function | 步进器数值改变是的通知事件;return {key:index //当前数据的索引 ,val: 3} | - | （e）=>{} |
| onBlurHandle | 否 | Function | input失去焦点触发，将用户当前输入值返回;return {key:index //当前数据的索引 ,val: 3} | - | （e）=>{} |
在小程序中使用
{
"usingComponents": {
"mas-adc-stepper": "@alipay/adc-stepper/es/index"
}
}在 page.axml 中引用组件
<!-- 页面使用方式 -->
<adc-stepper onCountHandle="onCountHandle" value="{{2}}" min="{{1}}" max="{{10}}"></adc-stepper>Badges
