[Slider] 在移动端设备下Slider button无法正常拖动

[zd5043039119]

tdesign-vue-next 版本

1.10.5

重现链接

https://tdesign.tencent.com/vue-next/components/slider

重现步骤

1. 打开Dev Tools， 使用设备工具栏， 并模拟移动端设备
2. 滚动到基础滑块
3. 两种滑块都无法正确滑动

期望结果

期望能正确滑动

实际结果

滑块都无法在移动端设备正确滑动

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

在 https://github.com/Tencent/tdesign-vue-next/blob/develop/src/slider/slider-button.tsx的onDragStart 有对事件为touchEvent做clientX和clientY的取值判断

const onDragStart = (event: MouseEvent | TouchEvent) => {
      slideButtonProps.dragging = true;
      slideButtonProps.isClick = true;
      const { type } = event;
      let { clientY, clientX } = event as MouseEvent;
      if (type === 'touchstart') {
        const touch = (event as TouchEvent).touches;
        [clientY, clientX] = [touch[0].clientY, touch[0].clientX];
      }
      if (props.vertical) {
        slideButtonProps.startY = clientY;
      } else {
        slideButtonProps.startX = clientX;
      }
      slideButtonProps.startPos = parseFloat(currentPos.value);
      slideButtonProps.newPos = slideButtonProps.startPos;
    };

但是在onDragging没有判断导致移动端计算diff时得到NaN

const onDragging = (e: MouseEvent | TouchEvent) => {
      const event = e;
      if (!slideButtonProps.dragging) {
        return;
      }
      dragged.value = true;
      slideButtonProps.isClick = false;
      if (parentProps?.resetSize && isFunction(parentProps?.resetSize)) {
        parentProps.resetSize();
      }
      let diff = 0;
      const parentSliderSize = parentProps.sliderSize;
      if (props.vertical) {
        diff = slideButtonProps.startY - (event as MouseEvent).clientY;
      } else {
        diff = (event as MouseEvent).clientX - slideButtonProps.startX;
      }
      diff = (diff / parentSliderSize) * 100;
      slideButtonProps.newPos = slideButtonProps.startPos + diff;
      setPosition(slideButtonProps.newPos);
    };

[github-actions]

👋 @zd5043039119，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。