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

src/slider/Slider.tsx

@@ -2,7 +2,9 @@ import { ref, computed, PropType, CSSProperties, defineComponent } from 'vue';
 
 // Utils
 import {
+  range,
   addUnit,
+  addNumber,
   getSizeStyle,
   preventDefault,
   stopPropagation,
@@ -102,9 +104,13 @@ export default defineComponent({
     });
 
     const format = (value: number) => {
-      const { min, max, step } = props;
-      value = Math.max(+min, Math.min(value, +max));
-      return Math.round(value / +step) * +step;
+      const min = +props.min;
+      const max = +props.max;
+      const step = +props.step;
+
+      value = range(value, min, max);
+      const diff = Math.round((value - min) / step) * step;
+      return addNumber(min, diff);
     };
 
     const isSameValue = (newValue: SliderValue, oldValue: SliderValue) =>

src/slider/test/index.spec.ts

@@ -1,5 +1,6 @@
 import { Slider } from '..';
 import {
+  later,
   mount,
   trigger,
   triggerDrag,
@@ -144,7 +145,7 @@ test('should change slider bar height when using bar-height prop', () => {
   expect(wrapper.style.height).toEqual('10px');
 });
 
-test('shoud change button size when using button-size prop', () => {
+test('should change button size when using button-size prop', () => {
   const wrapper = mount(Slider, {
     props: {
       modelValue: 50,
@@ -187,3 +188,18 @@ test('should not emit change event when value not changed', async () => {
 
   expect(wrapper.emitted('change')!.length).toEqual(1);
 });
+
+// https://github.com/youzan/vant/issues/8889
+test('should format v-model with step correctly', async () => {
+  const wrapper = mount(Slider, {
+    props: {
+      min: 29,
+      max: 39,
+      step: 2,
+      modelValue: 30.5,
+    },
+  });
+
+  await later();
+  expect(wrapper.emitted('update:modelValue')![0]).toEqual([31]);
+});

src/stepper/Stepper.tsx

@@ -4,6 +4,7 @@ import { ref, watch, computed, PropType, defineComponent, nextTick } from 'vue';
 import {
   isDef,
   addUnit,
+  addNumber,
   truthProp,
   resetScroll,
   formatNumber,
@@ -25,12 +26,6 @@ function equal(value1?: string | number, value2?: string | number) {
   return String(value1) === String(value2);
 }
 
-// add num and avoid float number
-function add(num1: number, num2: number) {
-  const cardinal = 10 ** 10;
-  return Math.round((num1 + num2) * cardinal) / cardinal;
-}
-
 export type StepperTheme = 'default' | 'round';
 
 export default defineComponent({
@@ -168,7 +163,7 @@ export default defineComponent({
       }
 
       const diff = actionType === 'minus' ? -props.step : +props.step;
-      const value = format(add(+current.value, diff));
+      const value = format(addNumber(+current.value, diff));
 
       setValue(value);
       emit(actionType);
@@ -215,7 +210,7 @@ export default defineComponent({
       nextTick(() => {
         emit('blur', event);
         resetScroll();
-      })
+      });
     };
 
     let isLongPress: boolean;

src/utils/format/number.ts

@@ -37,3 +37,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;
+}