安装

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

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