[improvement] Stepper: jsx (#2624)

packages/stepper/demo/index.vue

@@ -52,8 +52,10 @@ export default {
     };
   },
   methods: {
-    onChange(event) {
+    onChange(value) {
-      this.$toast(`change: ${event}`);
+      setTimeout(() => {
+        this.stepper2 = value;
+      }, 500);
     }
   }
 };

packages/stepper/en-US.md

@@ -31,6 +31,34 @@ export default {
 <van-stepper v-model="value" disabled />
 ```
 
+#### Async Change
+
+```html
+<van-stepper
+  :value="value"
+  async-change
+  @change="onChange"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: 1
+    }
+  },
+
+  methods: {
+    onChange(value) {
+      setTimeout(() => {
+        this.value = value;
+      }, 500);
+    }
+  }
+}
+```
+
 #### Advanced Usage
 
 ```html
@@ -55,7 +83,7 @@ export default {
 | integer | Whether to allow only integers | `Boolean` | `false` |
 | disabled | Disable value change | `Boolean` | `false` |
 | disable-input | Disable input | `Boolean` | `false` |
-| async-change | not change input value, only emit event | `Boolean` | `false` | - |
+| async-change | Whether to enable async change | `Boolean` | `false` | - |
 
 ### Event
 

packages/stepper/index.js

@@ -1,30 +1,8 @@
-<template>
+import { use, isDef } from '../utils';
-  <div :class="b()">
-    <button
-      :class="b('minus', { disabled: minusDisabled })"
-      @click="onChange('minus')"
-    />
-    <input
-      type="number"
-      :class="b('input')"
-      :value="currentValue"
-      :disabled="disabled || disableInput"
-      @input="onInput"
-      @blur="onBlur"
-    >
-    <button
-      :class="b('plus', { disabled: plusDisabled })"
-      @click="onChange('plus')"
-    />
-  </div>
-</template>
 
-<script>
+const [sfc, bem] = use('stepper');
-import create from '../utils/create';
-
-export default create({
-  name: 'stepper',
 
+export default sfc({
   props: {
     value: null,
     integer: Boolean,
@@ -50,7 +28,7 @@ export default create({
   },
 
   data() {
-    const value = this.range(this.isDef(this.value) ? this.value : this.defaultValue);
+    const value = this.range(isDef(this.value) ? this.value : this.defaultValue);
     if (value !== +this.value) {
       this.$emit('input', value);
     }
@@ -138,6 +116,32 @@ export default create({
         event.target.value = this.currentValue;
       }
     }
+  },
+
+  render(h) {
+    const onChange = type => () => {
+      this.onChange(type);
+    };
+
+    return (
+      <div class={bem()}>
+        <button
+          class={bem('minus', { disabled: this.minusDisabled })}
+          onClick={onChange('minus')}
+        />
+        <input
+          type="number"
+          class={bem('input')}
+          value={this.currentValue}
+          disabled={this.disabled || this.disableInput}
+          onInput={this.onInput}
+          onBlur={this.onBlur}
+        />
+        <button
+          class={bem('plus', { disabled: this.plusDisabled })}
+          onClick={onChange('plus')}
+        />
+      </div>
+    );
   }
 });
-</script>

packages/stepper/test/__snapshots__/demo.spec.js.snap

@@ -3,16 +3,16 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button> <input type="number" value="1" class="van-stepper__input"> <button class="van-stepper__plus"></button></div>
+    <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" value="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
   </div>
   <div>
-    <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button> <input type="number" disabled="disabled" value="1" class="van-stepper__input"> <button class="van-stepper__plus van-stepper__plus--disabled"></button></div>
+    <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" disabled="disabled" value="1" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>
   </div>
   <div>
-    <div class="van-stepper"><button class="van-stepper__minus"></button> <input type="number" value="10" class="van-stepper__input"> <button class="van-stepper__plus"></button></div>
+    <div class="van-stepper"><button class="van-stepper__minus"></button><input type="number" value="10" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
   </div>
   <div>
-    <div class="van-stepper"><button class="van-stepper__minus"></button> <input type="number" value="9" class="van-stepper__input"> <button class="van-stepper__plus"></button></div>
+    <div class="van-stepper"><button class="van-stepper__minus"></button><input type="number" value="9" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
   </div>
 </div>
 `;

packages/stepper/test/__snapshots__/index.spec.js.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`disable stepper input 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button> <input type="number" disabled="disabled" class="van-stepper__input"> <button class="van-stepper__plus"></button></div>`;
+exports[`disable stepper input 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus"></button></div>`;
 
-exports[`disabled stepper 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button> <input type="number" disabled="disabled" class="van-stepper__input"> <button class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;
+exports[`disabled stepper 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;

packages/stepper/zh-CN.md

@@ -26,12 +26,41 @@ export default {
 ```
 
 #### 禁用状态
+
 通过设置`disabled`属性来禁用 stepper
 
 ```html
 <van-stepper v-model="value" disabled />
 ```
 
+#### 异步变更
+
+```html
+<van-stepper
+  :value="value"
+  async-change
+  @change="onChange"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: 1
+    }
+  },
+
+  methods: {
+    onChange(value) {
+      setTimeout(() => {
+        this.value = value;
+      }, 500);
+    }
+  }
+}
+```
+
 #### 高级用法
 
 可以对组件设置`step`、`min`、`max`属性
@@ -57,7 +86,7 @@ export default {
 | integer | 是否只允许输入整数 | `Boolean` | `false` | 1.1.1 |
 | disabled | 是否禁用步进器 | `Boolean` | `false` | - |
 | disable-input | 是否禁用输入框 | `Boolean` | `false` | - |
-| async-change | 异步变更，为 `true` 时input值不变化，仅触发事件 | `Boolean` | `false` | - |
+| async-change | 是否开启异步变更，开启后需要手动控制输入值 | `Boolean` | `false` | - |
 
 ### Event