fix(Stepper): resolved precision problem (#906)

Tencent · Jun 29, 2023 · 2e3b8b8 · 2e3b8b8
1 parent a67ca51
commit 2e3b8b8
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 19 deletions.
diff --git a/src/stepper/__test__/index.test.jsx b/src/stepper/__test__/index.test.jsx
@@ -77,13 +77,13 @@ describe('stepper', () => {
       await nextTick();
       // value <= min，change 触发， value = min
       expect(onChange).toBeCalledTimes(1);
-      expect(value.value).toBe(1);
+      expect(Number(value.value)).toBe(1);
       expect(minusIcon.classes()).toContain('t-stepper--normal-disabled');
 
       await plusIcon.trigger('click');
       await nextTick();
       expect(onChange).toBeCalledTimes(2);
-      expect(value.value).toBe(3);
+      expect(Number(value.value)).toBe(3);
 
       // 此时 value = max, plusIcon 为禁用态
       expect(plusIcon.classes()).toContain('t-stepper--normal-disabled');
@@ -121,22 +121,22 @@ describe('stepper', () => {
       await plusIcon.trigger('click');
       await nextTick();
       expect(onChange).toBeCalledTimes(1);
-      expect(value.value).toBe(5);
+      expect(Number(value.value)).toBe(5);
 
       // 此时 value = max，不触发 change，但触发 overlimit
       await plusIcon.trigger('click');
       await nextTick();
       expect(onChange).toBeCalledTimes(1);
       expect(onOverlimit).toBeCalledTimes(1);
-      expect(value.value).toBe(5);
+      expect(Number(value.value)).toBe(5);
 
       /**
        * minusIcon
        */
       // 此时 value = 5，
       await minusIcon.trigger('click');
       await nextTick();
-      expect(value.value).toBe(0);
+      expect(Number(value.value)).toBe(0);
       expect(onChange).toBeCalledTimes(2);
 
       //此时 value = min， 不触发 change，但触发 overlimit

diff --git a/src/stepper/stepper.vue b/src/stepper/stepper.vue
@@ -5,7 +5,7 @@
         `${name}__minus`,
         `${name}__minus--${theme}`,
         `${name}__icon--${size}`,
-        `${disabled || stepperValue <= min ? name + '--' + theme + '-disabled' : ''}`,
+        `${disabled || Number(stepperValue) <= min ? name + '--' + theme + '-disabled' : ''}`,
       ]"
       @click="minusValue"
     >
@@ -33,7 +33,7 @@
         `${name}__plus`,
         `${name}__plus--${theme}`,
         `${name}__icon--${size}`,
-        `${disabled || stepperValue >= max ? name + '--' + theme + '-disabled' : ''}`,
+        `${disabled || Number(stepperValue) >= max ? name + '--' + theme + '-disabled' : ''}`,
       ]"
       @click="plusValue"
     >
@@ -62,43 +62,60 @@ export default defineComponent({
   props: StepperProps,
   emits: ['update:value', 'update:modelValue', 'blur', 'change', 'overlimit'],
   setup(props, context) {
-    const [stepperValue] = useDefault<number, TdStepperProps>(props, context.emit, 'value', 'change');
+    const [stepperValue] = useDefault<TdStepperProps['value'], TdStepperProps>(props, context.emit, 'value', 'change');
     const disabled = useFormDisabled();
     const { min, max, step, inputWidth } = toRefs(props);
     const inputStyle = computed(() => (inputWidth ? { width: `${inputWidth.value}px` } : ''));
 
     const isDisabled = (type: 'minus' | 'plus') => {
       if (disabled.value) return true;
-      if (type === 'minus' && stepperValue.value <= min.value) {
+      if (type === 'minus' && Number(stepperValue.value) <= min.value) {
         return true;
       }
-      if (type === 'plus' && stepperValue.value >= max.value) {
+      if (type === 'plus' && Number(stepperValue.value) >= max.value) {
         return true;
       }
       return false;
     };
 
-    const formatValue = (value: number) =>
-      Math.max(Math.min(max.value, value, Number.MAX_SAFE_INTEGER), min.value, Number.MIN_SAFE_INTEGER);
+    const getLen = (num: number) => {
+      const numStr = num.toString();
+      return numStr.indexOf('.') === -1 ? 0 : numStr.split('.')[1].length;
+    };
+
+    /**
+     * 精确加法
+     */
+    const add = (a: number, b: number) => {
+      const maxLen = Math.max(getLen(a), getLen(b));
+      const base = 10 ** maxLen;
+      return Math.round(a * base + b * base) / base;
+    };
+
+    const formatValue = (value: number) => {
+      return Math.max(Math.min(max.value, value, Number.MAX_SAFE_INTEGER), min.value, Number.MIN_SAFE_INTEGER).toFixed(
+        getLen(step.value),
+      );
+    };
 
-    const updateValue = (value: number) => {
-      stepperValue.value = formatValue(value);
+    const updateValue = (value: TdStepperProps['value']) => {
+      stepperValue.value = value;
     };
 
     const plusValue = () => {
       if (isDisabled('plus')) {
         props.onOverlimit?.('plus');
         return;
       }
-      updateValue(Number(stepperValue.value) + step.value);
+      updateValue(formatValue(add(Number(stepperValue.value), step.value)));
     };
 
     const minusValue = () => {
       if (isDisabled('minus')) {
         props.onOverlimit?.('minus');
         return;
       }
-      updateValue(Number(stepperValue.value) - step.value);
+      updateValue(formatValue(add(Number(stepperValue.value), -step.value)));
     };
 
     const handleInput = (e: Event) => {
@@ -107,16 +124,16 @@ export default defineComponent({
     };
 
     const handleChange = () => {
-      const formattedValue = formatValue(stepperValue.value);
+      const formattedValue = formatValue(Number(stepperValue.value));
       updateValue(formattedValue);
     };
 
     const handleFocus = () => {
-      props.onFocus?.(stepperValue.value);
+      props.onFocus?.(Number(stepperValue.value));
     };
 
     const handleBlur = () => {
-      props.onBlur?.(stepperValue.value);
+      props.onBlur?.(Number(stepperValue.value));
     };
 
     return {