feat(slider): support vertical props

TDesignOteam · Feb 8, 2025 · 273c898 · 273c898
1 parent f20aeef
commit 273c898
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 0 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-mobile-vue/src/slider/props.ts b/packages/products/tdesign-mobile-vue/src/slider/props.ts
@@ -64,6 +64,12 @@ export default {
     type: [Number, Array] as PropType<TdSliderProps['defaultValue']>,
     default: 0,
   },
+  /** 是否是垂直的滑块（渲染垂直滑块时，默认高度为200px，可通过修改`--td-slider-bar-height`来自定义高度） */
+  vertical: Boolean,
   /** 滑块值变化时触发 */
   onChange: Function as PropType<TdSliderProps['onChange']>,
+  /** 结束拖动时触发 */
+  onDragend: Function as PropType<TdSliderProps['onDragend']>,
+  /** 开始拖动时触发 */
+  onDragstart: Function as PropType<TdSliderProps['onDragstart']>,
 };
diff --git a/packages/products/tdesign-mobile-vue/src/slider/slider.en-US.md b/packages/products/tdesign-mobile-vue/src/slider/slider.en-US.md
@@ -17,10 +17,15 @@ step | Number | 1 | \- | N
 theme | String | default | options: default/capsule | N
 value | Number / Array | 0 | `v-model` and `v-model:value` is supported。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
 defaultValue | Number / Array | 0 | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+vertical | Boolean | false | \- | N
 onChange | Function |  | Typescript：`(value: SliderValue) => void`<br/> | N
+onDragend | Function |  | Typescript：`(value: SliderValue, e: TouchEvent) => void`<br/> | N
+onDragstart | Function |  | Typescript：`(e: TouchEvent) => void`<br/> | N
 
 ### Slider Events
 
 name | params | description
 -- | -- | --
 change | `(value: SliderValue)` | \-
+dragend | `(value: SliderValue, e: TouchEvent)` | \-
+dragstart | `(e: TouchEvent)` | \-
diff --git a/packages/products/tdesign-mobile-vue/src/slider/slider.md b/packages/products/tdesign-mobile-vue/src/slider/slider.md
@@ -17,10 +17,15 @@ step | Number | 1 | 步长 | N
 theme | String | default | 滑块风格。可选项：default/capsule | N
 value | Number / Array | 0 | 滑块值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
 defaultValue | Number / Array | 0 | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+vertical | Boolean | false | 是否是垂直的滑块（渲染垂直滑块时，默认高度为200px，可通过修改`--td-slider-bar-height`来自定义高度） | N
 onChange | Function |  | TS 类型：`(value: SliderValue) => void`<br/>滑块值变化时触发 | N
+onDragend | Function |  | TS 类型：`(value: SliderValue, e: TouchEvent) => void`<br/>结束拖动时触发 | N
+onDragstart | Function |  | TS 类型：`(e: TouchEvent) => void`<br/>开始拖动时触发 | N
 
 ### Slider Events
 
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: SliderValue)` | 滑块值变化时触发
+dragend | `(value: SliderValue, e: TouchEvent)` | 结束拖动时触发
+dragstart | `(e: TouchEvent)` | 开始拖动时触发
diff --git a/packages/products/tdesign-mobile-vue/src/slider/type.ts b/packages/products/tdesign-mobile-vue/src/slider/type.ts
@@ -65,10 +65,23 @@ export interface TdSliderProps {
    * @default 0
    */
   modelValue?: SliderValue;
+  /**
+   * 是否是垂直的滑块（渲染垂直滑块时，默认高度为200px，可通过修改`--td-slider-bar-height`来自定义高度）
+   * @default false
+   */
+  vertical?: boolean;
   /**
    * 滑块值变化时触发
    */
   onChange?: (value: SliderValue) => void;
+  /**
+   * 结束拖动时触发
+   */
+  onDragend?: (value: SliderValue, e: TouchEvent) => void;
+  /**
+   * 开始拖动时触发
+   */
+  onDragstart?: (e: TouchEvent) => void;
 }
 
 export interface SliderMarks {

diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -102819,6 +102819,43 @@
         "Boolean"
       ]
     },
+    {
+      "id": 1739007105,
+      "platform_framework": [
+        "8"
+      ],
+      "component": "Slider",
+      "field_category": 1,
+      "field_name": "vertical",
+      "field_type": [
+        "4"
+      ],
+      "field_default_value": "false",
+      "field_enum": "",
+      "field_desc_zh": "是否是垂直的滑块（渲染垂直滑块时，默认高度为200px，可通过修改`--td-slider-bar-height`来自定义高度）",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-02-08 09:31:45",
+      "update_time": "2025-02-08 09:31:45",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(Mobile)"
+      ],
+      "field_type_text": [
+        "Boolean"
+      ]
+    },
     {
       "id": 1203,
       "platform_framework": [