fix: 🐛 修复 Slider 处理边界值异常的问题，优化样式和事件处理逻辑 (#1050)

✅ Closes: #1023

Author: Moonofweisheng

src/subPages/slider/Index.vue

@@ -1,10 +1,10 @@
 <!--
  * @Author: weisheng
  * @Date: 2023-10-10 17:02:32
- * @LastEditTime: 2025-03-30 21:45:09
+ * @LastEditTime: 2025-05-13 13:16:42
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: /wot-design-uni/src/pages/slider/Index.vue
+ * @FilePath: /wot-design-uni/src/subPages/slider/Index.vue
  * 记得注释
 -->
 <template>
@@ -14,6 +14,7 @@
     </demo-block>
     <demo-block :title="$t('zhi-ding-xuan-ze-fan-wei')">
       <wd-slider v-model="value2" :min="-10" :max="10" />
+      <wd-slider v-model="value8" :min="160" :max="280" :step="30" />
     </demo-block>
     <demo-block :title="$t('zhi-ding-bu-chang')">
       <wd-slider v-model="value4" hide-min-max :step="10" />
@@ -34,6 +35,8 @@ import { ref } from 'vue'
 
 const value1 = ref<number>(30)
 const value2 = ref<number>(479)
+const value8 = ref<number>(185)
+
 const value4 = ref<number>(11)
 const value5 = ref<number>(70)
 const value6 = ref<number[]>([20, 40])

src/uni_modules/wot-design-uni/components/wd-slider/index.scss

@@ -58,10 +58,16 @@
   }
   @include e(button-wrapper) {
     width: calc($-slider-handle-radius * 2);
+    /* 右侧滑块按钮定位，向右偏移自身宽度的50% */
+    transform: translate3d(50%, -50%, 0);
     position: absolute;
     right: 0;
-    top: 0;
-    transform: translate3d(-50%, -50%, 0);
+
+    @include m(left){
+      left: 0;
+      /* 左侧滑块按钮定位，向左偏移自身宽度的50% */
+      transform: translate3d(-50%, -50%, 0);
+    }
   }
   @include e(has-label) {
     padding-top: calc($-slider-fs * 1.2 + 8px);

src/uni_modules/wot-design-uni/components/wd-slider/types.ts

@@ -1,15 +1,11 @@
-/*
- * @Author: weisheng
- * @Date: 2024-06-03 23:43:43
- * @LastEditTime: 2024-06-06 22:03:57
- * @LastEditors: weisheng
- * @Description:
- * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-slider/types.ts
- * 记得注释
- */
-import type { ComponentPublicInstance, PropType } from 'vue'
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
 
+/**
+ * 滑块值类型 - 单滑块为数字，双滑块为数组
+ */
+export type SliderValue = number | number[]
+
 export const sliderProps = {
   ...baseProps,
 
@@ -89,16 +85,54 @@ export const sliderProps = {
    * 默认值: 0
    */
   modelValue: {
-    type: [Number, Array] as PropType<number | number[]>,
+    type: [Number, Array] as PropType<SliderValue>,
     default: 0
   }
 }
 
+/**
+ * 滑块拖动事件参数
+ */
+export interface SliderDragEvent {
+  /**
+   * 当前滑块的值
+   * 单滑块模式为数字，双滑块模式为数组
+   */
+  value: SliderValue
+}
+
+/**
+ * 滑块组件事件类型定义
+ */
+export type SliderEmits = {
+  /**
+   * 开始拖动滑块时触发
+   */
+  dragstart: [event: SliderDragEvent]
+
+  /**
+   * 拖动滑块过程中触发
+   */
+  dragmove: [event: SliderDragEvent]
+
+  /**
+   * 结束拖动滑块时触发
+   */
+  dragend: [event: SliderDragEvent]
+
+  /**
+   * 更新滑块值时触发，用于v-model绑定
+   */
+  'update:modelValue': [value: SliderValue]
+}
+
 export type SliderExpose = {
   /**
    * 初始化slider宽度
    */
   initSlider: () => void
 }
 
-export type SliderInstance = ComponentPublicInstance<SliderExpose>
+export type SliderProps = ExtractPropTypes<typeof sliderProps>
+
+export type SliderInstance = ComponentPublicInstance<SliderProps, SliderExpose>