diff --git a/example/pages/stepper/index.js b/example/pages/stepper/index.js
index 2fb3b3b6..27f22043 100644
--- a/example/pages/stepper/index.js
+++ b/example/pages/stepper/index.js
@@ -2,7 +2,18 @@ import Page from '../../common/page';
import Toast from '../../dist/toast/toast';
Page({
+ data: {
+ value: 1
+ },
+
onChange(event) {
- Toast(`change: ${event.detail}`);
+ Toast.loading({
+ forbidClick: true
+ });
+
+ setTimeout(() => {
+ Toast.clear();
+ this.setData({ value: event.detail });
+ }, 500);
}
});
diff --git a/example/pages/stepper/index.wxml b/example/pages/stepper/index.wxml
index f16a4832..8a640987 100644
--- a/example/pages/stepper/index.wxml
+++ b/example/pages/stepper/index.wxml
@@ -1,28 +1,33 @@
-
-
-
+
+
+
-
-
-
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
-
-
+
+
+
diff --git a/packages/stepper/README.md b/packages/stepper/README.md
index cf4e64b0..8f2e3495 100644
--- a/packages/stepper/README.md
+++ b/packages/stepper/README.md
@@ -1,5 +1,9 @@
# Stepper 步进器
+### 介绍
+
+步进器由增加按钮、减少按钮和输入框组成,用于在一定范围内输入、调整数字
+
### 引入
在`app.json`或`index.json`中引入组件,默认为`ES6`版本,`ES5`引入方式参见[快速上手](#/quickstart)
@@ -14,33 +18,93 @@
### 基础用法
+通过`value`设置输入值,可以通过`change`事件监听到输入值的变化
+
```html
```
-### 禁用状态
-
-通过设置`disabled`属性来禁用 stepper
-
-```html
-
+```js
+Page({
+ onChange(event) {
+ console.log(event.detail);
+ }
+})
```
-### 高级用法
+### 步长设置
-默认是每次加减为1,可以对组件设置`step`、`min`、`max`属性
+通过`step`属性设置每次点击增加或减少按钮时变化的值,默认为`1`
+
+```html
+
+```
+
+### 限制输入范围
+
+通过`min`和`max`属性限制输入值的范围
+
+```html
+
+```
+
+### 限制输入整数
+
+设置`integer`属性后,输入框将限制只能输入整数
+
+```html
+
+```
+
+### 禁用状态
+
+通过设置`disabled`属性来禁用步进器,禁用状态下无法点击按钮或修改输入框
+
+```html
+
+```
+
+### 异步变更
+
+如果需要异步地修改输入框的值,可以设置`async-change`属性,并在`change`事件中手动修改`value`
```html
```
+```js
+Page({
+ data: {
+ value: 1
+ },
+
+ onChange(value) {
+ Toast.loading({ forbidClick: true });
+
+ setTimeout(() => {
+ Toast.clear();
+ this.setData({ value });
+ }, 500);
+ }
+});
+```
+
+### 自定义大小
+
+通过`input-width`属性设置输入框宽度,通过`button-size`属性设置按钮大小和输入框高度
+
+```html
+
+```
+
### Props
| 参数 | 说明 | 类型 | 默认值 |
@@ -49,11 +113,11 @@
| value | 输入值 | *string \| number* | 最小值 |
| min | 最小值 | *string \| number* | `1` |
| max | 最大值 | *string \| number* | - |
-| step | 步数 | *string \| number* | `1` |
+| step | 步长 | *string \| number* | `1` |
| integer | 是否只允许输入整数 | *boolean* | `false` |
| disabled | 是否禁用 | *boolean* | `false` |
| disable-input | 是否禁用输入框 | *boolean* | `false` |
-| async-change | 异步变更,为 `true` 时input值不变化,仅触发事件 | *boolean* | `false` |
+| async-change | 是否开启异步变更,开启后需要手动控制输入值 | *boolean* | `false` |
| input-width | 输入框宽度,须指定单位 | *string* | `30px` |
| show-plus | 是否显示增加按钮 | *boolean* | `true` |
| show-minus | 是否显示减少按钮 | *boolean* | `true` |