From 4d71231436c229e2748dca13e3d8bbdcc105a95b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Fri, 31 May 2019 17:34:59 +0800
Subject: [PATCH] [Doc] Stepper: update demo

---
 packages/stepper/demo/index.vue               | 85 +++++++++++++------
 packages/stepper/en-US.md                     | 31 ++++---
 .../test/__snapshots__/demo.spec.js.snap      | 40 +++++++--
 packages/stepper/zh-CN.md                     | 32 ++++---
 4 files changed, 128 insertions(+), 60 deletions(-)

diff --git a/packages/stepper/demo/index.vue b/packages/stepper/demo/index.vue
index c3fbc1efa..52a590c2c 100644
--- a/packages/stepper/demo/index.vue
+++ b/packages/stepper/demo/index.vue
@@ -1,35 +1,63 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <van-cell
+      center
+      :title="$t('basicUsage')"
+    >
       <van-stepper v-model="stepper1" />
-    </demo-block>
+    </van-cell>
 
-    <demo-block :title="$t('disabled')">
+    <van-cell
+      center
+      :title="$t('step')"
+    >
       <van-stepper
-        v-model="stepper1"
+        v-model="stepper2"
+        step="2"
+      />
+    </van-cell>
+
+    <van-cell
+      center
+      :title="$t('range')"
+    >
+      <van-stepper
+        v-model="stepper3"
+        :min="5"
+        :max="8"
+      />
+    </van-cell>
+
+    <van-cell
+      center
+      :title="$t('integer')"
+    >
+      <van-stepper
+        v-model="stepper4"
+        integer
+      />
+    </van-cell>
+
+    <van-cell
+      center
+      :title="$t('disabled')"
+    >
+      <van-stepper
+        v-model="stepper5"
         disabled
       />
-    </demo-block>
+    </van-cell>
 
-    <demo-block :title="$t('asyncChange')">
+    <van-cell
+      center
+      :title="$t('asyncChange')"
+    >
       <van-stepper
-        :value="stepper2"
-        integer
+        :value="stepper6"
         async-change
         @change="onChange"
       />
-    </demo-block>
-
-    <demo-block :title="$t('advancedUsage')">
-      <van-stepper
-        v-model="stepper3"
-        integer
-        :min="5"
-        :max="40"
-        :step="2"
-        :default-value="9"
-      />
-    </demo-block>
+    </van-cell>
   </demo-section>
 </template>
 
@@ -37,9 +65,15 @@
 export default {
   i18n: {
     'zh-CN': {
+      step: '步长设置',
+      range: '限制输入范围',
+      integer: '限制输入整数',
       asyncChange: '异步变更'
     },
     'en-US': {
+      step: 'Step',
+      range: 'Range',
+      integer: 'Integer',
       asyncChange: 'Async Change',
     }
   },
@@ -47,8 +81,11 @@ export default {
   data() {
     return {
       stepper1: 1,
-      stepper2: 10,
-      stepper3: null
+      stepper2: 1,
+      stepper3: 1,
+      stepper4: 1,
+      stepper5: 1,
+      stepper6: 1
     };
   },
 
@@ -61,7 +98,7 @@ export default {
       this.changing = true;
       setTimeout(() => {
         this.changing = false;
-        this.stepper2 = value;
+        this.stepper6 = value;
       }, 500);
     }
   }
@@ -70,8 +107,6 @@ export default {
 
 <style lang="less">
 .demo-stepper {
-  background-color: #fff;
-
   .van-stepper {
     margin-left: 15px;
   }
diff --git a/packages/stepper/en-US.md b/packages/stepper/en-US.md
index 534b6fbad..0ed86f08f 100644
--- a/packages/stepper/en-US.md
+++ b/packages/stepper/en-US.md
@@ -26,6 +26,24 @@ export default {
 }
 ```
 
+### Step
+
+```html
+<van-stepper v-model="value" step="2" />
+```
+
+### Range
+
+```html
+<van-stepper v-model="value" min="5" max="8" />
+```
+
+### Integer
+
+```html
+<van-stepper v-model="value" integer />
+```
+
 ### Disabled
 
 ```html
@@ -66,19 +84,6 @@ export default {
 }
 ```
 
-### Advanced Usage
-
-```html
-<van-stepper
-  v-model="value"
-  integer
-  :min="5"
-  :max="40"
-  :step="2"
-  :default-value="9"
-/>
-```
-
 ## API
 
 ### Props
diff --git a/packages/stepper/test/__snapshots__/demo.spec.js.snap b/packages/stepper/test/__snapshots__/demo.spec.js.snap
index cc2dad44f..8d9754105 100644
--- a/packages/stepper/test/__snapshots__/demo.spec.js.snap
+++ b/packages/stepper/test/__snapshots__/demo.spec.js.snap
@@ -2,17 +2,41 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div>
-    <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title"><span>基础用法</span></div>
+    <div class="van-cell__value">
+      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+    </div>
   </div>
-  <div>
-    <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title"><span>步长设置</span></div>
+    <div class="van-cell__value">
+      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+    </div>
   </div>
-  <div>
-    <div class="van-stepper"><button class="van-stepper__minus"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="10" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title"><span>限制输入范围</span></div>
+    <div class="van-cell__value">
+      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="8" aria-valuemin="5" aria-valuenow="5" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+    </div>
   </div>
-  <div>
-    <div class="van-stepper"><button class="van-stepper__minus"></button><input type="number" role="spinbutton" aria-valuemax="40" aria-valuemin="5" aria-valuenow="9" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title"><span>限制输入整数</span></div>
+    <div class="van-cell__value">
+      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+    </div>
+  </div>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title"><span>禁用状态</span></div>
+    <div class="van-cell__value">
+      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>
+    </div>
+  </div>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title"><span>异步变更</span></div>
+    <div class="van-cell__value">
+      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+    </div>
   </div>
 </div>
 `;
diff --git a/packages/stepper/zh-CN.md b/packages/stepper/zh-CN.md
index d81e26854..d4e5b2363 100644
--- a/packages/stepper/zh-CN.md
+++ b/packages/stepper/zh-CN.md
@@ -26,6 +26,24 @@ export default {
 }
 ```
 
+### 步长设置
+
+```html
+<van-stepper v-model="value" step="2" />
+```
+
+### 限制输入范围
+
+```html
+<van-stepper v-model="value" min="5" max="8" />
+```
+
+### 限制输入整数
+
+```html
+<van-stepper v-model="value" integer />
+```
+
 ### 禁用状态
 
 通过设置`disabled`属性来禁用 stepper
@@ -68,20 +86,6 @@ export default {
 }
 ```
 
-### 高级用法
-
-可以对组件设置`step`、`min`、`max`属性
-
-```html
-<van-stepper
-  v-model="value"
-  integer
-  :min="5"
-  :max="40"
-  :step="2"
-/>
-```
-
 ## API
 
 ### Props