[Improvement] Stepper: add interger prop (#951)

docs/demos/views/stepper.vue

@@ -9,7 +9,14 @@
     </demo-block>
 
     <demo-block :title="$t('advancedUsage')">
-      <van-stepper v-model="stepper2" :min="5" :max="40" :step="2" :default-value="9" />
+      <van-stepper
+        v-model="stepper2"
+        interger
+        :min="5"
+        :max="40"
+        :step="2"
+        :default-value="9"
+      />
     </demo-block>
   </demo-section>
 </template>

docs/markdown/en-US/stepper.md

@@ -36,6 +36,7 @@ export default {
 ```html
 <van-stepper
   v-model="value"
+  interger
   :min="5"
   :max="40"
   :step="2"
@@ -45,14 +46,15 @@ export default {
 
 ### API
 
-| Attribute | Description | Type | Default | Accepted Values |
-|-----------|-----------|-----------|-------------|-------------|
-| min | Min value | `String | Number` | `1` | - |
-| max | Max value | `String | Number` | - | - |
-| default-value | Default value | `String | Number` | `1` | - |
-| step | Value change step | `String | Number` | `1` | - |
-| disabled | Disable value change | `Boolean` | `false` | - | 
-| disable-input | Disable input | `Boolean` | `false` | - |
+| Attribute | Description | Type | Default |
+|-----------|-----------|-----------|-------------|
+| min | Min value | `String | Number` | `1` |
+| max | Max value | `String | Number` | - |
+| default-value | Default value | `String | Number` | `1` |
+| step | Value change step | `String | Number` | `1` |
+| interger | Whether to allow only integers | `Boolean` | `false` |
+| disabled | Disable value change | `Boolean` | `false` |
+| disable-input | Disable input | `Boolean` | `false` |
 
 ### Event
 

docs/markdown/zh-CN/stepper.md

@@ -39,6 +39,7 @@ export default {
 ```html
 <van-stepper
   v-model="value"
+  interger
   :min="5"
   :max="40"
   :step="2"
@@ -48,14 +49,15 @@ export default {
 
 ### API
 
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| min | 最小值 | `String | Number` | `1` | - |
-| max | 最大值 | `String | Number` | - | - |
-| default-value | 默认值 | `String | Number` | `1` | - |
-| step | 步数 | `String | Number` | `1` | - |
-| disabled | 是否禁用 | `Boolean` | `false` | - | 
-| disable-input | 是否禁用input框 | `Boolean` | `false` | - |
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| min | 最小值 | `String | Number` | `1` |
+| max | 最大值 | `String | Number` | - |
+| default-value | 默认值 | `String | Number` | `1` |
+| step | 步数 | `String | Number` | `1` |
+| interger | 是否只允许输入整数 | `Boolean` | `false` |
+| disabled | 是否禁用 | `Boolean` | `false` |
+| disable-input | 是否禁用input框 | `Boolean` | `false` |
 
 ### Event
 

packages/stepper/index.vue

@@ -10,6 +10,7 @@
       :value="currentValue"
       :disabled="disabled || disableInput"
       @input="onInput"
+      @keypress="onKeypress"
     >
     <button
       :class="b('plus', { disabled: plusDisabled })"
@@ -26,6 +27,7 @@ export default create({
 
   props: {
     value: {},
+    interger: Boolean,
     disabled: Boolean,
     disableInput: Boolean,
     min: {
@@ -88,14 +90,9 @@ export default create({
 
   methods: {
     correctValue(value) {
-      if (Number.isNaN(value)) {
-        value = this.min;
-      } else {
-        value = Math.max(this.min, value);
-        value = Math.min(this.max, value);
-      }
-
-      return value;
+      return Number.isNaN(value)
+        ? this.min
+        : Math.max(this.min, Math.min(this.max, value));
     },
 
     onInput(event) {
@@ -118,6 +115,12 @@ export default create({
       this.$emit(type);
     },
 
+    onKeypress(event) {
+      if (this.interger && event.keyCode === 46) {
+        event.preventDefault();
+      }
+    },
+
     emitInput() {
       this.$emit('input', this.currentValue);
       this.$emit('change', this.currentValue);