feat(Slider): dragend event add value parameter

Tencent · Sep 1, 2024 · fb61dff · fb61dff
1 parent cc2c61b
commit fb61dff
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 44 deletions.
diff --git a/src/slider/README.en-US.md b/src/slider/README.en-US.md
@@ -1,35 +1,47 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Slider Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-colors | Array | [] | Typescript：`Array<string>` | N
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+colors | Array | [] | `deprecated`。Typescript：`Array<string>` | N
 disabled | Boolean | false | \- | N
-disabled-color | Array | [] | Typescript：`Array<string>` | N
-external-classes | Array | - | `['t-class', 't-class-bar', 't-class-bar-active', 't-class-bar-disabled', 't-class-cursor']` | N
+disabled-color | Array | [] | `deprecated`。Typescript：`Array<string>` | N
 label | String / Boolean | false | Typescript：`string \| boolean` | N
 marks | Object / Array | {} | Typescript：`Record<number, string> \| Array<number>` | N
 max | Number | 100 | \- | N
 min | Number | 0 | \- | N
 range | Boolean | false | \- | N
 show-extreme-value | Boolean | false | \- | N
 step | Number | 1 | \- | N
-theme | String | default | `0.30.0`。options：default/capsule | N
+theme | String | default | `0.30.0`。options: default/capsule | N
 value | Number / Array | 0 | Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N
 default-value | Number / Array | undefined | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N
+vertical | Boolean | false | \- | N
 
 ### Slider Events
 
 name | params | description
 -- | -- | --
 change | `(value: SliderValue)` | \-
-dragend | \- | \-
-dragstart | \- | \-
+dragend | `(value: SliderValue, e: TouchEvent)` | \-
+dragstart | `(e: TouchEvent)` | \-
+### Slider External Classes
 
+className | Description
+-- | --
+t-class | \-
+t-class-bar | \-
+t-class-bar-active | \-
+t-class-bar-disabled | \-
+t-class-cursor | \-
 
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -49,4 +61,4 @@ Name | Default Value | Description
 --td-slider-dot-disabled-bg-color | #fff | - 
 --td-slider-dot-disabled-color | #f3f3f3 | - 
 --td-slider-dot-size | 40rpx | - 
---td-slider-text-color | @text-color-primary | - 
+--td-slider-text-color | @text-color-primary | -
diff --git a/src/slider/README.md b/src/slider/README.md
@@ -63,13 +63,16 @@ isComponent: true
 {{ vertical }}
 
 ## API
+
 ### Slider Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-colors | Array | [] | 废弃。颜色，[已选择, 未选择]。TS 类型：`Array<string>` | N
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
+colors | Array | [] | 已废弃。颜色，[已选择, 未选择]。TS 类型：`Array<string>` | N
 disabled | Boolean | false | 是否禁用组件 | N
-disabled-color | Array | [] | 废弃。禁用状态滑动条的颜色，[已选, 未选]。TS 类型：`Array<string>` | N
+disabled-color | Array | [] | 已废弃。禁用状态滑动条的颜色，[已选, 未选]。TS 类型：`Array<string>` | N
 label | String / Boolean | false | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string \| boolean` | N
 marks | Object / Array | {} | 刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5:  '5¥', 10: '10%' }`。TS 类型：`Record<number, string> \| Array<number>` | N
 max | Number | 100 | 滑块范围最大值 | N
@@ -87,34 +90,20 @@ vertical | Boolean | false | 是否是垂直的滑块（渲染垂直滑块时，
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: SliderValue)` | 滑块值变化时触发
-dragend | \- | 结束拖动时触发
-dragstart | \- | 开始拖动时触发
+dragend | `(value: SliderValue, e: TouchEvent)` | 结束拖动时触发
+dragstart | `(e: TouchEvent)` | 开始拖动时触发
+### Slider External Classes
 
-### Slider 外部样式类
-类名 | 说明
--- | -- 
+类名 | 描述
+-- | --
 t-class | 根节点样式类
 t-class-bar | 滑道底部样式类
 t-class-bar-active | 滑道激活态样式类
 t-class-bar-disabled | 滑道禁用态样式类
 t-class-cursor | 游标样式类
 
-## FAQ
-
-当 slider 外层使用 `hidden` 包裹，需要在 `hidden = false` 时，重新调用组件的 `init` 方法，才能正常渲染（在t-popup/t-dialog中同理）。如下：
-
-```html
-<t-slider id="slider" />
-```
-
-```js
-const $slider = this.selectComponent('#slider');
-
-$slider.init();
-```
-
+### CSS Variables
 
-### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -134,4 +123,4 @@ $slider.init();
 --td-slider-dot-disabled-bg-color | #fff | - 
 --td-slider-dot-disabled-color | #f3f3f3 | - 
 --td-slider-dot-size | 40rpx | - 
---td-slider-text-color | @text-color-primary | - 
+--td-slider-text-color | @text-color-primary | -
diff --git a/src/slider/__test__/__snapshots__/demo.test.js.snap b/src/slider/__test__/__snapshots__/demo.test.js.snap
@@ -198,6 +198,8 @@ exports[`Slider Slider range demo works fine 1`] = `
         ]
       }}"
       range="{{true}}"
+      bind:dragend="onDragend"
+      bind:dragstart="onDragstart"
     />
   </wx-view>
 </range>

diff --git a/src/slider/_example/range/index.js b/src/slider/_example/range/index.js
@@ -1 +1,10 @@
-Component({});
+Component({
+  methods: {
+    onDragstart(e) {
+      console.log('dragstart', e.detail);
+    },
+    onDragend(e) {
+      console.log('dragend', e.detail);
+    },
+  },
+});
diff --git a/src/slider/_example/range/index.wxml b/src/slider/_example/range/index.wxml
@@ -1,3 +1,3 @@
 <view class="wrapper">
-  <t-slider range defaultValue="{{[35, 65]}}" />
+  <t-slider range defaultValue="{{[35, 65]}}" bind:dragstart="onDragstart" bind:dragend="onDragend" />
 </view>
diff --git a/src/slider/props.ts b/src/slider/props.ts
@@ -50,6 +50,11 @@ const props: TdSliderProps = {
     type: Number,
     value: 1,
   },
+  /** 自定义组件样式 */
+  style: {
+    type: String,
+    value: '',
+  },
   /** 滑块风格 */
   theme: {
     type: String,
@@ -65,7 +70,7 @@ const props: TdSliderProps = {
     type: null,
     value: 0,
   },
-  /** 是否是垂直滑块 */
+  /** 是否是垂直的滑块（渲染垂直滑块时，默认高度为400rpx，可通过修改`--td-slider-bar-height`来自定义高度） */
   vertical: {
     type: Boolean,
     value: false,

diff --git a/src/slider/slider.ts b/src/slider/slider.ts
@@ -454,7 +454,7 @@ export default class Slider extends SuperComponent {
   }
 
   onTouchEnd(e: WechatMiniprogram.TouchEvent) {
-    this.triggerEvent('dragend', { e });
+    this.triggerEvent('dragend', { e, value: this.data._value });
     if (e.currentTarget.id === 'rightDot') {
       this.data.identifier[1] = -1;
     } else {

diff --git a/src/slider/type.ts b/src/slider/type.ts
@@ -5,14 +5,6 @@
  * */
 
 export interface TdSliderProps {
-  /**
-   * 自定义组件样式
-   * @default ''
-   */
-  style?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 是否禁用组件
    * @default false
@@ -84,6 +76,14 @@ export interface TdSliderProps {
     type: NumberConstructor;
     value?: number;
   };
+  /**
+   * 自定义组件样式
+   * @default ''
+   */
+  style?: {
+    type: StringConstructor;
+    value?: string;
+  };
   /**
    * 滑块风格
    * @default default
@@ -109,7 +109,7 @@ export interface TdSliderProps {
     value?: SliderValue;
   };
   /**
-   * 是否垂直展示
+   * 是否是垂直的滑块（渲染垂直滑块时，默认高度为400rpx，可通过修改`--td-slider-bar-height`来自定义高度）
    * @default false
    */
   vertical?: {