feat(Stepper): add decimal-length prop (#4443)

src/stepper/README.md

@@ -51,6 +51,18 @@ export default {
 <van-stepper v-model="value" disabled />
 ```
 
+### Decimal Length
+
+```html
+<van-stepper v-model="value" step="0.2" :decimal-length="1" />
+```
+
+### Custom Size
+
+```html
+<van-stepper v-model="value" input-width="40px" button-size="32px" />
+```
+
 ### Async Change
 
 ```html
@@ -82,16 +94,6 @@ export default {
 }
 ```
 
-### Custom Size
-
-```html
-<van-stepper
-  v-model="value"
-  input-width="40px"
-  button-size="32px"
-/>
-```
-
 ## API
 
 ### Props
@@ -110,6 +112,7 @@ export default {
 | button-size | Button size | *string \| number* | `28px` | 2.0.5 |
 | show-plus | Whether to show plus button | *boolean* | `true` | 2.1.2 |
 | show-minus | Whether to show minus button | *boolean* | `true` | 2.1.2 |
+| decimal-length | Decimal length | *number* | - | 2.2.1 |
 
 ### Events
 

src/stepper/README.zh-CN.md

@@ -65,6 +65,22 @@ export default {
 <van-stepper v-model="value" disabled />
 ```
 
+### 固定小数位数
+
+通过设置`decimal-length`属性可以保留固定的小数位数
+
+```html
+<van-stepper v-model="value" step="0.2" :decimal-length="1" />
+```
+
+### 自定义大小
+
+通过`input-width`属性设置输入框宽度，通过`button-size`属性设置按钮大小和输入框高度
+
+```html
+<van-stepper v-model="value" input-width="40px" button-size="32px" />
+```
+
 ### 异步变更
 
 如果需要异步地修改输入框的值，可以设置`async-change`属性，并在`change`事件中手动修改`value`
@@ -100,25 +116,13 @@ export default {
 }
 ```
 
-### 自定义大小
-
-通过`input-width`属性设置输入框宽度，通过`button-size`属性设置按钮大小和输入框高度
-
-```html
-<van-stepper
-  v-model="value"
-  input-width="40px"
-  button-size="32px"
-/>
-```
-
 ## API
 
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| v-model | 当前输入值 | *string \| number* | 最小值 | - |
+| v-model | 当前输入值 | *string \| number* | min | - |
 | min | 最小值 | *string \| number* | `1` | - |
 | max | 最大值 | *string \| number* | - | - |
 | step | 步长 | *string \| number* | `1` | - |
@@ -127,9 +131,10 @@ export default {
 | disable-input | 是否禁用输入框 | *boolean* | `false` | - |
 | async-change | 是否开启异步变更，开启后需要手动控制输入值 | *boolean* | `false` | - |
 | input-width | 输入框宽度，默认单位为`px` | *string \| number* | `32px` | - |
-| button-size | 按钮大小，默认单位为`px`，输入框高度会和按钮大小保持一致 | *string \| number* | `28px` | 2.0.5 |
+| button-size | 按钮大小以及输入框高度，默认单位为`px` | *string \| number* | `28px` | 2.0.5 |
 | show-plus | 是否显示增加按钮 | *boolean* | `true` | 2.1.2 |
 | show-minus | 是否显示减少按钮 | *boolean* | `true` | 2.1.2 |
+| decimal-length | 固定显示的小数位数 | *number* | - | 2.2.1 |
 
 ### Events
 

src/stepper/demo/index.vue

@@ -1,73 +1,35 @@
 <template>
   <demo-section>
-    <van-cell
+    <van-cell center :title="$t('basicUsage')">
-      center
-      :title="$t('basicUsage')"
-    >
       <van-stepper v-model="stepper1" />
     </van-cell>
 
-    <van-cell
+    <van-cell center :title="$t('step')">
-      center
+      <van-stepper v-model="stepper2" step="2" />
-      :title="$t('step')"
-    >
-      <van-stepper
-        v-model="stepper2"
-        step="2"
-      />
     </van-cell>
 
-    <van-cell
+    <van-cell center :title="$t('range')">
-      center
+      <van-stepper v-model="stepper3" :min="5" :max="8" />
-      :title="$t('range')"
-    >
-      <van-stepper
-        v-model="stepper3"
-        :min="5"
-        :max="8"
-      />
     </van-cell>
 
-    <van-cell
+    <van-cell center :title="$t('integer')">
-      center
+      <van-stepper v-model="stepper4" integer />
-      :title="$t('integer')"
-    >
-      <van-stepper
-        v-model="stepper4"
-        integer
-      />
     </van-cell>
 
-    <van-cell
+    <van-cell center :title="$t('disabled')">
-      center
+      <van-stepper v-model="stepper5" disabled />
-      :title="$t('disabled')"
-    >
-      <van-stepper
-        v-model="stepper5"
-        disabled
-      />
     </van-cell>
 
-    <van-cell
+    <van-cell center :title="$t('decimalLength')">
-      center
+      <van-stepper v-model="stepper8" :decimal-length="1" step="0.2" />
-      :title="$t('asyncChange')"
-    >
-      <van-stepper
-        :value="stepper6"
-        async-change
-        @change="onChange"
-      />
     </van-cell>
 
-    <van-cell
+    <van-cell center :title="$t('customSize')">
-      center
+      <van-stepper v-model="stepper7" button-size="32px" input-width="40px" />
-      :title="$t('customSize')"
+    </van-cell>
-    >
+
-      <van-stepper
+    <van-cell center :title="$t('asyncChange')">
-        v-model="stepper7"
+      <van-stepper :value="stepper6" async-change @change="onChange" />
-        button-size="32px"
-        input-width="40px"
-      />
     </van-cell>
   </demo-section>
 </template>
@@ -80,14 +42,16 @@ export default {
       range: '限制输入范围',
       integer: '限制输入整数',
       asyncChange: '异步变更',
-      customSize: '自定义大小'
+      customSize: '自定义大小',
+      decimalLength: '固定小数位数'
     },
     'en-US': {
       step: 'Step',
       range: 'Range',
       integer: 'Integer',
       asyncChange: 'Async Change',
-      customSize: 'Custom Size'
+      customSize: 'Custom Size',
+      decimalLength: 'Decimal Length'
     }
   },
 
@@ -99,7 +63,8 @@ export default {
       stepper4: 1,
       stepper5: 1,
       stepper6: 1,
-      stepper7: 1
+      stepper7: 1,
+      stepper8: 1
     };
   },
 

src/stepper/index.js

@@ -7,6 +7,10 @@ const [createComponent, bem] = createNamespace('stepper');
 const LONG_PRESS_START_TIME = 600;
 const LONG_PRESS_INTERVAL = 200;
 
+function equal(value1, value2) {
+  return String(value1) === String(value2);
+}
+
 export default createComponent({
   props: {
     value: null,
@@ -16,6 +20,7 @@ export default createComponent({
     buttonSize: [Number, String],
     asyncChange: Boolean,
     disableInput: Boolean,
+    decimalLength: Number,
     min: {
       type: [Number, String],
       default: 1
@@ -43,8 +48,10 @@ export default createComponent({
   },
 
   data() {
-    const value = this.range(isDef(this.value) ? this.value : this.defaultValue);
+    const defaultValue = isDef(this.value) ? this.value : this.defaultValue;
-    if (value !== +this.value) {
+    const value = this.format(defaultValue);
+
+    if (!equal(value, this.value)) {
       this.$emit('input', value);
     }
 
@@ -90,7 +97,7 @@ export default createComponent({
 
   watch: {
     value(val) {
-      if (val !== this.currentValue) {
+      if (!equal(val, this.currentValue)) {
         this.currentValue = this.format(val);
       }
     },
@@ -103,29 +110,54 @@ export default createComponent({
 
   methods: {
     // filter illegal characters
-    format(value) {
+    filter(value) {
       value = String(value).replace(/[^0-9.-]/g, '');
-      return value === '' ? 0 : this.integer ? Math.floor(value) : +value;
+
+      if (this.integer && value.indexOf('.') !== -1) {
+        value = value.split('.')[0];
+      }
+
+      return value;
     },
 
-    // limit value range
+    format(value) {
-    range(value) {
+      value = this.filter(value);
-      return Math.max(Math.min(this.max, this.format(value)), this.min);
+
+      // format range
+      value = value === '' ? 0 : +value;
+      value = Math.max(Math.min(this.max, value), this.min);
+
+      // format decimal
+      if (isDef(this.decimalLength)) {
+        value = value.toFixed(this.decimalLength);
+      }
+
+      return value;
     },
 
     onInput(event) {
       const { value } = event.target;
-      const formatted = this.format(value);
 
+      // allow input to be empty
+      if (value === '') {
+        return;
+      }
+
+      const formatted = this.filter(value);
+
+      if (!equal(value, formatted)) {
+        event.target.value = formatted;
+      }
+
+      this.emitChange(formatted);
+    },
+
+    emitChange(value) {
       if (this.asyncChange) {
-        event.target.value = this.currentValue;
+        this.$emit('input', value);
-        this.$emit('input', formatted);
+        this.$emit('change', value);
-        this.$emit('change', formatted);
       } else {
-        if (+value !== formatted) {
+        this.currentValue = value;
-          event.target.value = formatted;
-        }
-        this.currentValue = formatted;
       }
     },
 
@@ -138,15 +170,17 @@ export default createComponent({
       }
 
       const diff = type === 'minus' ? -this.step : +this.step;
-      const value = Math.round((this.currentValue + diff) * 100) / 100;
 
-      if (this.asyncChange) {
+      let value = +this.currentValue + diff;
-        this.$emit('input', value);
+
-        this.$emit('change', value);
+      // avoid float number
-      } else {
+      if (!isDef(this.decimalLength)) {
-        this.currentValue = this.range(value);
+        value = Math.round(value * 100) / 100;
       }
 
+      value = this.format(value);
+
+      this.emitChange(value);
       this.$emit(type);
     },
 
@@ -155,14 +189,11 @@ export default createComponent({
     },
 
     onBlur(event) {
-      this.currentValue = this.range(this.currentValue);
+      const value = this.format(event.target.value);
+      event.target.value = value;
+      this.currentValue = value;
       this.$emit('blur', event);
 
-      // fix edge case when input is empty and min is 0
-      if (this.currentValue === 0) {
-        event.target.value = this.currentValue;
-      }
-
       resetScroll();
     },
 

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

@@ -33,9 +33,9 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div class="van-cell van-cell--center">
-    <div class="van-cell__title"><span>异步变更</span></div>
+    <div class="van-cell__title"><span>固定小数位数</span></div>
     <div class="van-cell__value">
-      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="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" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1.0" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
     </div>
   </div>
   <div class="van-cell van-cell--center">
@@ -44,5 +44,11 @@ exports[`renders demo correctly 1`] = `
       <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled" style="width: 32px; height: 32px;"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 40px; height: 32px;"><button class="van-stepper__plus" style="width: 32px; height: 32px;"></button></div>
     </div>
   </div>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title"><span>异步变更</span></div>
+    <div class="van-cell__value">
+      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+    </div>
+  </div>
 </div>
 `;

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

@@ -4,6 +4,6 @@ exports[`disable stepper input 1`] = `<div class="van-stepper"><button class="va
 
 exports[`disabled stepper 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;
 
-exports[`input width 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 10rem;"><button class="van-stepper__plus"></button></div>`;
+exports[`input-width prop 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 10rem;"><button class="van-stepper__plus"></button></div>`;
 
 exports[`show-plus & show-minus props 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled" style="display: none;"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus" style="display: none;"></button></div>`;

src/stepper/test/index.spec.js

@@ -60,35 +60,45 @@ test('long press', async () => {
   expect(wrapper.emitted('input')).toEqual([[2], [3], [4]]);
 });
 
-test('correct value when value is not correct', () => {
+test('filter value during user input', () => {
   const wrapper = mount(Stepper, {
     propsData: {
-      value: 50,
+      value: 1
-      max: 30,
-      min: 10
     }
   });
 
-  const input = wrapper.find('input');
+  const input = wrapper.find('.van-stepper__input');
-  input.element.value = 1;
+  input.element.value = '';
-  input.trigger('input');
-  input.element.value = 'abc';
-  input.trigger('input');
-  wrapper.setData({ value: 'abc' });
-  input.trigger('input');
-  wrapper.setData({ value: '' });
-  input.trigger('input');
-  wrapper.setData({ value: 40 });
-  input.trigger('input');
-  wrapper.setData({ value: 30 });
   input.trigger('input');
+  expect(wrapper.emitted('input')).toBeFalsy();
 
-  expect(wrapper.emitted('input')).toEqual([[30], [1], [0], [40], [30]]);
+  input.element.value = 'a';
+  input.trigger('input');
+  expect(input.element.value).toEqual('');
+  expect(wrapper.emitted('input')).toBeFalsy();
+
+  input.element.value = '2';
+  input.trigger('input');
+  expect(input.element.value).toEqual('2');
+  expect(wrapper.emitted('input')[0][0]).toEqual('2');
+});
+
+test('shoud watch value and format it', () => {
+  const wrapper = mount(Stepper, {
+    propsData: {
+      value: 1,
+      max: 5
+    }
+  });
+
+  wrapper.setData({ value: 10 });
+  expect(wrapper.emitted('input')[0][0]).toEqual(5);
 });
 
 test('only allow interger', () => {
   const wrapper = mount(Stepper, {
     propsData: {
+      value: 1,
       integer: true
     }
   });
@@ -98,7 +108,8 @@ test('only allow interger', () => {
   input.trigger('input');
   input.trigger('blur');
 
-  expect(wrapper.emitted('input')).toEqual([[1]]);
+  expect(wrapper.emitted('input')[0][0]).toEqual('1');
+  expect(wrapper.emitted('input')[1][0]).toEqual(1);
 });
 
 test('stepper focus', () => {
@@ -121,16 +132,15 @@ test('stepper blur', () => {
   });
 
   const input = wrapper.find('input');
-  input.trigger('blur');
   input.element.value = '';
   input.trigger('input');
   input.trigger('blur');
 
-  expect(wrapper.emitted('input')).toEqual([[0], [3]]);
+  expect(wrapper.emitted('input')[0][0]).toEqual(3);
   expect(wrapper.emitted('blur')).toBeTruthy();
 });
 
-test('input width', () => {
+test('input-width prop', () => {
   const wrapper = mount(Stepper, {
     propsData: {
       inputWidth: '10rem'
@@ -139,7 +149,7 @@ test('input width', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('async change', () => {
+test('async-change prop', () => {
   const wrapper = mount(Stepper, {
     propsData: {
       value: 1,
@@ -157,8 +167,8 @@ test('async change', () => {
   input.element.value = '3';
   input.trigger('input');
 
-  expect(wrapper.emitted('input')[1][0]).toEqual(3);
+  expect(wrapper.emitted('input')[1][0]).toEqual('3');
-  expect(wrapper.emitted('change')[1][0]).toEqual(3);
+  expect(wrapper.emitted('change')[1][0]).toEqual('3');
 });
 
 test('min value is 0', () => {
@@ -174,7 +184,7 @@ test('min value is 0', () => {
   input.trigger('input');
   input.trigger('blur');
 
-  expect(wrapper.emitted('input')[0][0]).toEqual(0);
+  expect(input.element.value).toEqual('0');
 });
 
 test('show-plus & show-minus props', () => {
@@ -187,3 +197,19 @@ test('show-plus & show-minus props', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('decimal-length prop', () => {
+  const wrapper = mount(Stepper, {
+    propsData: {
+      value: 1,
+      step: 0.2,
+      decimalLength: 2
+    }
+  });
+
+  expect(wrapper.emitted('input')[0][0]).toEqual('1.00');
+
+  const plus = wrapper.find('.van-stepper__plus');
+  plus.trigger('click');
+  expect(wrapper.emitted('input')[1][0]).toEqual('1.20');
+});