fix(Slider): format v-model with step correctly (#8894)

src/slider/index.js

@@ -1,6 +1,7 @@
 import { createNamespace, addUnit } from '../utils';
 import { deepClone } from '../utils/deep-clone';
 import { preventDefault } from '../utils/dom/event';
+import { range, addNumber } from '../utils/format/number';
 import { TouchMixin } from '../mixins/touch';
 import { FieldMixin } from '../mixins/field';
 
@@ -183,10 +184,13 @@ export default createComponent({
     },
 
     format(value) {
-      return (
+      const min = +this.min;
-        Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) *
+      const max = +this.max;
-        this.step
+      const step = +this.step;
-      );
+
+      value = range(value, min, max);
+      const diff = Math.round((value - min) / step) * step;
+      return addNumber(min, diff);
     },
   },
 

src/stepper/index.js

@@ -1,7 +1,7 @@
 import { createNamespace, isDef, addUnit } from '../utils';
 import { resetScroll } from '../utils/dom/reset-scroll';
 import { preventDefault } from '../utils/dom/event';
-import { formatNumber } from '../utils/format/number';
+import { addNumber, formatNumber } from '../utils/format/number';
 import { isNaN } from '../utils/validate/number';
 import { FieldMixin } from '../mixins/field';
 
@@ -14,12 +14,6 @@ function equal(value1, value2) {
   return String(value1) === String(value2);
 }
 
-// add num and avoid float number
-function add(num1, num2) {
-  const cardinal = 10 ** 10;
-  return Math.round((num1 + num2) * cardinal) / cardinal;
-}
-
 export default createComponent({
   mixins: [FieldMixin],
 
@@ -193,7 +187,7 @@ export default createComponent({
         event.target.value = formatted;
       }
 
-      // perfer number type
+      // prefer number type
       if (formatted === String(+formatted)) {
         formatted = +formatted;
       }
@@ -220,14 +214,14 @@ export default createComponent({
 
       const diff = type === 'minus' ? -this.step : +this.step;
 
-      const value = this.format(add(+this.currentValue, diff));
+      const value = this.format(addNumber(+this.currentValue, diff));
 
       this.emitChange(value);
       this.$emit(type);
     },
 
     onFocus(event) {
-      // readonly not work in lagacy mobile safari
+      // readonly not work in legacy mobile safari
       if (this.disableInput && this.$refs.input) {
         this.$refs.input.blur();
       } else {
@@ -324,7 +318,7 @@ export default createComponent({
           style={this.inputStyle}
           disabled={this.disabled}
           readonly={this.disableInput}
-          // set keyboard in mordern browers
+          // set keyboard in modern browsers
           inputmode={this.integer ? 'numeric' : 'decimal'}
           placeholder={this.placeholder}
           aria-valuemax={this.max}

src/utils/format/number.ts

@@ -44,3 +44,9 @@ export function formatNumber(
 
   return value.replace(regExp, '');
 }
+
+// add num and avoid float number
+export function addNumber(num1: number, num2: number) {
+  const cardinal = 10 ** 10;
+  return Math.round((num1 + num2) * cardinal) / cardinal;
+}

yarn.lock

@@ -3385,9 +3385,9 @@ camelcase@^6.0.0:
   integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
 
 caniuse-lite@^1.0.30001038, caniuse-lite@^1.0.30001039, caniuse-lite@^1.0.30001087, caniuse-lite@^1.0.30001088:
-  version "1.0.30001171"
+  version "1.0.30001238"
-  resolved "https://registry.npm.taobao.org/caniuse-lite/download/caniuse-lite-1.0.30001171.tgz?cache=0&sync_timestamp=1609200352224&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcaniuse-lite%2Fdownload%2Fcaniuse-lite-1.0.30001171.tgz#3291e11e02699ad0a29e69b8d407666fc843eba7"
+  resolved "https://registry.nlark.com/caniuse-lite/download/caniuse-lite-1.0.30001238.tgz?cache=0&sync_timestamp=1623999794080&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcaniuse-lite%2Fdownload%2Fcaniuse-lite-1.0.30001238.tgz#e6a8b45455c5de601718736d0242feef0ecdda15"
-  integrity sha1-MpHhHgJpmtCinmm41Admb8hD66c=
+  integrity sha1-5qi0VFXF3mAXGHNtAkL+7w7N2hU=
 
 capture-exit@^2.0.0:
   version "2.0.0"