[Doc] Stepper: update demo

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;
   }