64 lines
1.2 KiB
Markdown
64 lines
1.2 KiB
Markdown
# Custom Stepper 自定义步进器组件
|
||
|
||
## 介绍
|
||
自定义步进器组件，类似于Vant Weapp的van-stepper，包含两个按钮和一个输入框，可用于在设定的范围内增加或减少数值。
|
||
|
||
## 使用示例
|
||
|
||
在页面的JSON配置文件中注册组件：
|
||
```json
|
||
{
|
||
"usingComponents": {
|
||
"custom-stepper": "/components/custom-stepper/index"
|
||
}
|
||
}
|
||
```
|
||
|
||
在WXML中使用组件：
|
||
```xml
|
||
<custom-stepper
|
||
value="{{ value }}"
|
||
min="0"
|
||
max="100"
|
||
step="1"
|
||
disabled="{{ false }}"
|
||
bindchange="onChange" />
|
||
```
|
||
|
||
在页面JS中处理事件：
|
||
```javascript
|
||
Page({
|
||
data: {
|
||
value: 0
|
||
},
|
||
|
||
onChange(e) {
|
||
this.setData({
|
||
value: e.detail.value
|
||
});
|
||
}
|
||
});
|
||
```
|
||
|
||
## 属性说明
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
|-------|------|-------|------|
|
||
| value | Number | 0 | 当前值 |
|
||
| min | Number | 0 | 最小值 |
|
||
| max | Number | 100 | 最大值 |
|
||
| step | Number | 1 | 步长 |
|
||
| disabled | Boolean | false | 是否禁用 |
|
||
|
||
## 事件说明
|
||
|
||
| 事件名 | 说明 | 返回值 |
|
||
|-------|------|-------|
|
||
| bindchange | 当值发生变化时触发 | { value: Number } |
|
||
|
||
## 更新日志
|
||
|
||
### 1.0.0
|
||
- 初始版本发布
|
||
- 实现基本的步进功能
|
||
- 支持设置范围、步长和禁用状态 |