1.0.3 • Published 3 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>