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

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);
-    if (value !== +this.value) {
+    const defaultValue = isDef(this.value) ? this.value : this.defaultValue;
+    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
-    range(value) {
-      return Math.max(Math.min(this.max, this.format(value)), this.min);
+    format(value) {
+      value = this.filter(value);
+
+      // 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', formatted);
-        this.$emit('change', formatted);
+        this.$emit('input', value);
+        this.$emit('change', value);
       } else {
-        if (+value !== formatted) {
-          event.target.value = formatted;
-        }
-        this.currentValue = formatted;
+        this.currentValue = value;
       }
     },
 
@@ -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) {
-        this.$emit('input', value);
-        this.$emit('change', value);
-      } else {
-        this.currentValue = this.range(value);
+      let value = +this.currentValue + diff;
+
+      // avoid float number
+      if (!isDef(this.decimalLength)) {
+        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();
     },