feat: migrate Stepper component

components.js

@@ -55,4 +55,5 @@ module.exports = [
   'number-keyboard',
   'password-input',
   'search',
+  'stepper',
 ];

docs/markdown/changelog-v3.zh-CN.md

@@ -47,6 +47,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 - Field
 - Radio
 - RadioGroup
+- Search
+- Stepper
 - Switch
 - Sidebar
 

src/stepper/README.md

@@ -72,7 +72,7 @@ export default {
 ### Async Change
 
 ```html
-<van-stepper :value="value" async-change @change="onChange" />
+<van-stepper :model-value="value" async-change @change="onChange" />
 ```
 
 ```js

src/stepper/README.zh-CN.md

@@ -94,7 +94,7 @@ export default {
 如果需要异步地修改输入框的值，可以设置`async-change`属性，并在`change`事件中手动修改`value`
 
 ```html
-<van-stepper :value="value" async-change @change="onChange" />
+<van-stepper :model-value="value" async-change @change="onChange" />
 ```
 
 ```js

src/stepper/demo/index.vue

@@ -33,7 +33,7 @@
     </van-cell>
 
     <van-cell center :title="t('asyncChange')">
-      <van-stepper :value="stepper6" async-change @change="onChange" />
+      <van-stepper :model-value="stepper6" async-change @change="onChange" />
     </van-cell>
 
     <van-cell v-if="!isWeapp" center :title="t('roundTheme')">

src/stepper/index.js

@@ -24,10 +24,10 @@ export default createComponent({
   mixins: [FieldMixin],
 
   props: {
-    value: null,
     theme: String,
     integer: Boolean,
     disabled: Boolean,
+    modelValue: null,
     allowEmpty: Boolean,
     inputWidth: [Number, String],
     buttonSize: [Number, String],
@@ -71,12 +71,24 @@ export default createComponent({
     },
   },
 
+  emits: [
+    'plus',
+    'blur',
+    'minus',
+    'focus',
+    'change',
+    'overlimit',
+    'update:modelValue',
+  ],
+
   data() {
-    const defaultValue = isDef(this.value) ? this.value : this.defaultValue;
+    const defaultValue = isDef(this.modelValue)
+      ? this.value
+      : this.defaultValue;
     const value = this.format(defaultValue);
 
-    if (!equal(value, this.value)) {
+    if (!equal(value, this.modelValue)) {
-      this.$emit('input', value);
+      this.$emit('update:modelValue', value);
     }
 
     return {
@@ -129,14 +141,14 @@ export default createComponent({
     integer: 'check',
     decimalLength: 'check',
 
-    value(val) {
+    modelValue(val) {
       if (!equal(val, this.currentValue)) {
         this.currentValue = this.format(val);
       }
     },
 
     currentValue(val) {
-      this.$emit('input', val);
+      this.$emit('update:modelValue', val);
       this.$emit('change', val, { name: this.name });
     },
   },
@@ -194,7 +206,7 @@ export default createComponent({
 
     emitChange(value) {
       if (this.asyncChange) {
-        this.$emit('input', value);
+        this.$emit('update:modelValue', value);
         this.$emit('change', value, { name: this.name });
       } else {
         this.currentValue = value;
@@ -272,20 +284,18 @@ export default createComponent({
 
   render() {
     const createListeners = (type) => ({
-      on: {
+      onClick: (e) => {
-        click: (e) => {
         // disable double tap scrolling on mobile safari
         e.preventDefault();
         this.type = type;
         this.onChange();
       },
-        touchstart: () => {
+      onTouchstart: () => {
         this.type = type;
         this.onTouchStart();
       },
-        touchend: this.onTouchEnd,
+      onTouchend: this.onTouchEnd,
-        touchcancel: this.onTouchEnd,
+      onTouchcancel: this.onTouchEnd,
-      },
     });
 
     return (

vant.config.js

@@ -163,10 +163,10 @@ module.exports = {
                 path: 'slider',
                 title: 'Slider 滑块',
               },
-              // {
+              {
-              //   path: 'stepper',
+                path: 'stepper',
-              //   title: 'Stepper 步进器',
+                title: 'Stepper 步进器',
-              // },
+              },
               {
                 path: 'switch',
                 title: 'Switch 开关',
@@ -497,10 +497,10 @@ module.exports = {
                 path: 'slider',
                 title: 'Slider',
               },
-              // {
+              {
-              //   path: 'stepper',
+                path: 'stepper',
-              //   title: 'Stepper',
+                title: 'Stepper',
-              // },
+              },
               {
                 path: 'switch',
                 title: 'Switch',