fix(slider): 修复Slider部分属性丢失响应性问题

src/slider/hooks/useSliderInput.tsx

@@ -1,20 +1,22 @@
-import { computed, ComputedRef } from 'vue';
+import { computed, Ref } from 'vue';
 import { TdSliderProps } from '../type';
 import InputNumber, { InputNumberProps } from '../../input-number';
 
+interface useSliderInputProps {
+  inputNumberProps: boolean | TdSliderProps['inputNumberProps'];
+  max: number;
+  min: number;
+  step: number;
+  prefixName: string;
+  vertical: boolean;
+  disabled: boolean;
+}
+
 /**
  * 聚合管理inputNumber渲染逻辑
  */
-export const useSliderInput = (
-  inputNumberProps: boolean | TdSliderProps['inputNumberProps'],
-  max: number,
-  min: number,
-  step: number,
-  prefixName: string,
-  isVertical: boolean,
-  disabled: ComputedRef<boolean>,
-) => {
-  const name = prefixName;
+export const useSliderInput = (config: Ref<useSliderInputProps>) => {
+  const name = config.value.prefixName;
 
   /** 根据传入属性缓存计算inputNumber props */
   const sliderInputState = computed(() => {
@@ -24,8 +26,9 @@ export const useSliderInput = (
       inputPlaceholder: '',
       inputTheme: 'column' as InputNumberProps['theme'],
     };
-    if (typeof inputNumberProps !== 'boolean') {
-      const inputNumbeConfig = inputNumberProps as TdSliderProps['inputNumberProps'];
+    const inputProps = config.value;
+    if (typeof inputProps.inputNumberProps !== 'boolean') {
+      const inputNumbeConfig = inputProps.inputNumberProps as TdSliderProps['inputNumberProps'];
       const inputDecimalPlaces = inputNumbeConfig.decimalPlaces;
       const inputFormat = inputNumbeConfig.format;
       const inputPlaceholder = inputNumbeConfig.placeholder;
@@ -50,7 +53,7 @@ export const useSliderInput = (
     return [
       `${name}__input`,
       {
-        'is-vertical': isVertical,
+        'is-vertical': config.value.vertical,
       },
     ];
   });
@@ -60,11 +63,11 @@ export const useSliderInput = (
       <InputNumber
         class={sliderNumberClass.value}
         value={val}
-        step={step}
+        step={config.value.step}
         onChange={changeFn}
-        disabled={disabled.value}
-        min={min}
-        max={max}
+        disabled={config.value.disabled}
+        min={config.value.min}
+        max={config.value.max}
         decimalPlaces={sliderInputState.value.inputDecimalPlaces}
         format={sliderInputState.value.inputFormat}
         placeholder={sliderInputState.value.inputPlaceholder}

src/slider/hooks/useSliderMark.tsx

@@ -1,4 +1,4 @@
-import { computed, VNode } from 'vue';
+import { computed, VNode, Ref } from 'vue';
 import cloneDeep from 'lodash/cloneDeep';
 import { SliderMarks } from '../type';
 import { TNode } from '../../common';
@@ -22,27 +22,22 @@ interface useSliderMarkProps {
 /**
  * 聚合管理刻度值渲染逻辑
  */
-export const useSliderMark = (
-  max: number,
-  min: number,
-  marks: number[] | SliderMarks,
-  isVertical: boolean,
-  prefixName: string,
-) => {
-  const name = prefixName;
+export const useSliderMark = (config: Ref<useSliderMarkProps>) => {
+  const name = config.value.prefixName;
   const markList = computed(() => {
-    if (!marks) {
+    const markProps = config.value;
+    if (!markProps.marks) {
       return [];
     }
     const legalMarks: Array<MarkItem> = [];
-    if (Array.isArray(marks)) {
-      const marksList = cloneDeep(marks).sort((a, b) => a - b);
-      const maxLimit = Math.max(...marksList, max);
-      const minLimit = Math.min(...marksList, min);
-      if (minLimit < min) {
+    if (Array.isArray(markProps.marks)) {
+      const marksList = cloneDeep(markProps.marks).sort((a, b) => a - b);
+      const maxLimit = Math.max(...marksList, markProps.max);
+      const minLimit = Math.min(...marksList, markProps.min);
+      if (minLimit < markProps.min) {
         log.errorOnce('TSlider', 'marks min value should >= props min');
       }
-      if (maxLimit > max) {
+      if (maxLimit > markProps.max) {
         log.errorOnce('TSlider', 'marks max value should <= props max');
       }
       marksList.forEach((item) => {
@@ -53,15 +48,15 @@ export const useSliderMark = (
         });
       });
     } else {
-      Object.keys(marks)
+      Object.keys(markProps.marks)
         .map(parseFloat)
         .sort((a, b) => a - b)
-        .filter((point) => point <= max && point >= min)
+        .filter((point) => point <= markProps.max && point >= markProps.min)
         .forEach((point) => {
           const item: MarkItem = {
             point,
-            position: ((point - min) * 100) / (max - min),
-            mark: marks[point],
+            position: ((point - markProps.min) * 100) / (markProps.max - markProps.min),
+            mark: markProps.marks[point],
           };
           legalMarks.push(item);
         });
@@ -77,7 +72,7 @@ export const useSliderMark = (
             {markList.value.map((item, index) => (
               <div
                 class={`${name}__stop ${name}__mark-stop`}
-                style={getStopStyle(item.position, isVertical)}
+                style={getStopStyle(item.position, config.value.vertical)}
                 key={index}
               />
             ))}
@@ -88,8 +83,8 @@ export const useSliderMark = (
                 mark={item.mark}
                 point={item.point}
                 key={key}
-                style={getStopStyle(item.position, isVertical)}
-                on-change-value={onChangeFn}
+                style={getStopStyle(item.position, config.value.vertical)}
+                onClickMarkPoint={onChangeFn}
               />
             ))}
           </div>

src/slider/slider-button.tsx

@@ -90,7 +90,7 @@ export default defineComponent({
       value = Number(parseFloat(`${value}`).toFixed(parentProps.precision.value));
       ctx.emit('input', value);
       nextTick(() => {
-        popupRef.value && (popupRef.value as ComponentPublicInstance).updatePopper();
+        popupRef.value && (popupRef.value as ComponentPublicInstance)?.updatePopper?.();
       });
     };
 

src/slider/slider-mark.tsx

@@ -11,13 +11,16 @@ export default defineComponent({
     point: {
       type: Number,
     },
+    onClickMarkPoint: {
+      type: Function,
+      default: () => {},
+    },
   },
-  emits: ['change-value'],
-  setup(props, ctx) {
+  setup(props) {
     const COMPONENT_NAME = usePrefixClass('slider__mark');
     const changeValue = (e: MouseEvent) => {
       e.stopPropagation();
-      ctx.emit('change-value', props.point);
+      props?.onClickMarkPoint?.(props.point);
     };
 
     return () => (

src/slider/slider.tsx

@@ -312,17 +312,25 @@ export default defineComponent({
     });
 
     /** -------------------------- 渲染相关逻辑 start --------------------------  */
-    const renderMask = useSliderMark(props.max, props.min, props.marks, vertical.value, COMPONENT_NAME.value);
+    const markConfig = computed(() => ({
+      max: props.max,
+      min: props.min,
+      marks: props.marks,
+      vertical: vertical.value,
+      prefixName: COMPONENT_NAME.value,
+    }));
+    const renderMask = useSliderMark(markConfig);
 
-    const renderInputNumber = useSliderInput(
-      props.inputNumberProps,
-      props.max,
-      props.min,
-      props.step,
-      COMPONENT_NAME.value,
-      vertical.value,
-      disabled,
-    );
+    const inputConfig = computed(() => ({
+      max: props.max,
+      min: props.min,
+      inputNumberProps: props.inputNumberProps,
+      step: props.step,
+      prefixName: COMPONENT_NAME.value,
+      vertical: vertical.value,
+      disabled: disabled.value,
+    }));
+    const renderInputNumber = useSliderInput(inputConfig);
 
     const renderInputButton = (): VNode => {
       const firstInputVal = props.range ? firstValue.value : (sliderState.prevValue as number);