feat(Stepper): add name prop (#4931)

src/stepper/README.md

@@ -104,6 +104,7 @@ export default {
 | min | Min value | *string \| number* | `1` | - |
 | max | Max value | *string \| number* | - | - |
 | step | Value change step | *string \| number* | `1` | - |
+| name | Stepper name | *string \| number* | - | 2.0.3 |
 | integer | Whether to allow only integers | *boolean* | `false` | - |
 | disabled | Disable value change | *boolean* | `false` | - |
 | disable-input | Disable input | *boolean* | `false` | - |
@@ -118,9 +119,9 @@ export default {
 
 | Event | Description | Arguments |
 |------|------|------|
-| change | Triggered when value change | value: current value |
+| change | Triggered when value change | value: current value, detail: Detail info, contains name |
 | overlimit | Triggered when click disabled button | - |
 | plus | Triggered when click plus button | - |
 | minus | Triggered when click minus button | - |
-| focus | Triggered when input focused | - |
+| focus | Triggered when input focused | event: Event |
-| blur | Triggered when input blured | - |
+| blur | Triggered when input blured | event: Event |

src/stepper/README.zh-CN.md

@@ -125,7 +125,8 @@ export default {
 | v-model | 当前输入值 | *string \| number* | min | - |
 | min | 最小值 | *string \| number* | `1` | - |
 | max | 最大值 | *string \| number* | - | - |
-| step | 步长 | *string \| number* | `1` | - |
+| step | 步长，每次点击时改变的值 | *string \| number* | `1` | - |
+| name | 标识符，可以在`change`事件回调参数中获取 | *string \| number* | - | 2.2.11 |
 | integer | 是否只允许输入整数 | *boolean* | `false` | - |
 | disabled | 是否禁用步进器 | *boolean* | `false` | - |
 | disable-input | 是否禁用输入框 | *boolean* | `false` | - |
@@ -140,9 +141,9 @@ export default {
 
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
-| change | 当绑定值变化时触发的事件 | 当前组件的值 |
+| change | 当绑定值变化时触发的事件 | value: 当前组件的值, detail: 额外信息，包含 name 的字段 |
 | overlimit | 点击不可用的按钮时触发 | - |
 | plus | 点击增加按钮时触发 | - |
 | minus | 点击减少按钮时触发 | - |
-| focus | 输入框聚焦时触发 | - |
+| focus | 输入框聚焦时触发 | event: Event |
-| blur | 输入框失焦时触发 | - |
+| blur | 输入框失焦时触发 | event: Event |

src/stepper/index.js

@@ -27,6 +27,10 @@ export default createComponent({
     asyncChange: Boolean,
     disableInput: Boolean,
     decimalLength: Number,
+    name: {
+      type: [Number, String],
+      default: ''
+    },
     min: {
       type: [Number, String],
       default: 1
@@ -110,7 +114,7 @@ export default createComponent({
 
     currentValue(val) {
       this.$emit('input', val);
-      this.$emit('change', val);
+      this.$emit('change', val, { name: this.name });
     }
   },
 
@@ -167,7 +171,7 @@ export default createComponent({
     emitChange(value) {
       if (this.asyncChange) {
         this.$emit('input', value);
-        this.$emit('change', value);
+        this.$emit('change', value, { name: this.name });
       } else {
         this.currentValue = value;
       }

src/stepper/test/index.spec.js

@@ -229,3 +229,16 @@ test('should limit decimal-length when input', () => {
 
   expect(input.element.value).toEqual('1.2');
 });
+
+test('name prop', () => {
+  const wrapper = mount(Stepper);
+
+  const plus = wrapper.find('.van-stepper__plus');
+
+  plus.trigger('click');
+  expect(wrapper.emitted('change')[0][1]).toEqual({ name: '' });
+
+  wrapper.setProps({ name: 'name' });
+  plus.trigger('click');
+  expect(wrapper.emitted('change')[1][1]).toEqual({ name: 'name' });
+});