Skip to content

Commit 681300a

Browse files
uyarnuyarn
committed
feat(slider): add changeEnd event
1 parent fd2a06b commit 681300a

File tree

15 files changed

+608
-3123
lines changed

15 files changed

+608
-3123
lines changed

‎db/TDesign.db

4 KB
Binary file not shown.

‎packages/products/tdesign-react/src/slider/defaultProps.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
3+
* */
4+
5+
import { TdSliderProps } from './type';
6+
7+
export const sliderDefaultProps: TdSliderProps = {
8+
disabled: false,
9+
inputNumberProps: false,
10+
label: true,
11+
layout: 'horizontal',
12+
max: 100,
13+
min: 0,
14+
range: false,
15+
showStep: false,
16+
step: 1,
17+
defaultValue: 0,
18+
};

‎packages/products/tdesign-react/src/slider/slider.en-US.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
:: BASE_DOC ::
22

33
## API
4-
54
### Slider Props
65

76
name | type | default | description | required
@@ -11,7 +10,7 @@ style | Object | - | 样式，Typescript：`React.CSSProperties` | N
1110
disabled | Boolean | false | \- | N
1211
inputNumberProps | Boolean / Object | false | Typescript：`boolean \| InputNumberProps`，[InputNumber API Documents](./input-number?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/slider/type.ts) | N
1312
label | TNode | true | Typescript：`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
14-
layout | String | horizontal | options：vertical/horizontal | N
13+
layout | String | horizontal | options: vertical/horizontal | N
1514
marks | Object / Array | - | Typescript：`Array<number> \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/slider/type.ts) | N
1615
max | Number | 100 | \- | N
1716
min | Number | 0 | \- | N
@@ -22,3 +21,4 @@ tooltipProps | Object | - | Typescript：`TooltipProps`，[Tooltip API Documents
2221
value | Number / Array | 0 | Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/slider/type.ts) | N
2322
defaultValue | Number / Array | 0 | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/slider/type.ts) | N
2423
onChange | Function | | Typescript：`(value: SliderValue) => void`<br/> | N
24+
onChangeEnd | Function | | Typescript：`(value: SliderValue) => void`<br/>triggered when the mouse button is released after dragging or clicking on the slider bar. It is suitable for scenarios where you do not want the callback to be triggered frequently during the process of dragging the slider | N

‎packages/products/tdesign-react/src/slider/slider.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
:: BASE_DOC ::
22

33
## API
4-
54
### Slider Props
65

76
名称 | 类型 | 默认值 | 说明 | 必传
@@ -22,3 +21,4 @@ tooltipProps | Object | - | 透传提示组件属性。TS 类型：`TooltipProps
2221
value | Number / Array | 0 | 滑块值。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/slider/type.ts) | N
2322
defaultValue | Number / Array | 0 | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/slider/type.ts) | N
2423
onChange | Function | | TS 类型：`(value: SliderValue) => void`<br/>滑块值变化时触发 | N
24+
onChangeEnd | Function | | TS 类型：`(value: SliderValue) => void`<br/>松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用 | N

‎packages/products/tdesign-react/src/slider/type.ts

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/* eslint-disable */
2+
3+
/**
4+
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
5+
* */
6+
7+
import { InputNumberProps } from '../input-number';
8+
import { TooltipProps } from '../tooltip';
9+
import { TNode } from '../common';
10+
11+
export interface TdSliderProps {
12+
/**
13+
* 是否禁用组件
14+
* @default false
15+
*/
16+
disabled?: boolean;
17+
/**
18+
* 用于控制数字输入框组件，值为 false 表示不显示数字输入框；值为 true 表示呈现默认数字输入框；值类型为 Object 表示透传属性到数字输入框组件
19+
* @default false
20+
*/
21+
inputNumberProps?: boolean | InputNumberProps;
22+
/**
23+
* 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值
24+
* @default true
25+
*/
26+
label?: string | boolean | TNode<{ value: SliderValue; position?: 'start' | 'end' }>;
27+
/**
28+
* 滑块布局方向
29+
* @default horizontal
30+
*/
31+
layout?: 'vertical' | 'horizontal';
32+
/**
33+
* 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`
34+
*/
35+
marks?: Array<number> | SliderMarks;
36+
/**
37+
* 滑块范围最大值
38+
* @default 100
39+
*/
40+
max?: number;
41+
/**
42+
* 滑块范围最小值
43+
* @default 0
44+
*/
45+
min?: number;
46+
/**
47+
* 双游标滑块
48+
* @default false
49+
*/
50+
range?: boolean;
51+
/**
52+
* 控制步长刻度值显示
53+
* @default false
54+
*/
55+
showStep?: boolean;
56+
/**
57+
* 步长
58+
* @default 1
59+
*/
60+
step?: number;
61+
/**
62+
* 透传提示组件属性
63+
*/
64+
tooltipProps?: TooltipProps;
65+
/**
66+
* 滑块值
67+
* @default 0
68+
*/
69+
value?: SliderValue;
70+
/**
71+
* 滑块值，非受控属性
72+
* @default 0
73+
*/
74+
defaultValue?: SliderValue;
75+
/**
76+
* 滑块值变化时触发
77+
*/
78+
onChange?: (value: SliderValue) => void;
79+
/**
80+
* 松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用
81+
*/
82+
onChangeEnd?: (value: SliderValue) => void;
83+
}
84+
85+
export interface SliderMarks {
86+
[mark: number]: string | TNode<{ value: number }>;
87+
}
88+
89+
export type SliderValue = number | Array<number>;

‎packages/products/tdesign-vue-next/src/slider/props.ts

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/* eslint-disable */
2+
3+
/**
4+
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
5+
* */
6+
7+
import { TdSliderProps } from './type';
8+
import { PropType } from 'vue';
9+
10+
export default {
11+
/** 是否禁用组件 */
12+
disabled: Boolean,
13+
/** 用于控制数字输入框组件，值为 false 表示不显示数字输入框；值为 true 表示呈现默认数字输入框；值类型为 Object 表示透传属性到数字输入框组件 */
14+
inputNumberProps: {
15+
type: [Boolean, Object] as PropType<TdSliderProps['inputNumberProps']>,
16+
default: false as TdSliderProps['inputNumberProps'],
17+
},
18+
/** 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值 */
19+
label: {
20+
type: [String, Boolean, Function] as PropType<TdSliderProps['label']>,
21+
default: true as TdSliderProps['label'],
22+
},
23+
/** 滑块布局方向 */
24+
layout: {
25+
type: String as PropType<TdSliderProps['layout']>,
26+
default: 'horizontal' as TdSliderProps['layout'],
27+
validator(val: TdSliderProps['layout']): boolean {
28+
if (!val) return true;
29+
return ['vertical', 'horizontal'].includes(val);
30+
},
31+
},
32+
/** 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }` */
33+
marks: {
34+
type: [Object, Array] as PropType<TdSliderProps['marks']>,
35+
},
36+
/** 滑块范围最大值 */
37+
max: {
38+
type: Number,
39+
default: 100,
40+
},
41+
/** 滑块范围最小值 */
42+
min: {
43+
type: Number,
44+
default: 0,
45+
},
46+
/** 双游标滑块 */
47+
range: Boolean,
48+
/** 控制步长刻度值显示 */
49+
showStep: Boolean,
50+
/** 步长 */
51+
step: {
52+
type: Number,
53+
default: 1,
54+
},
55+
/** 透传提示组件属性 */
56+
tooltipProps: {
57+
type: Object as PropType<TdSliderProps['tooltipProps']>,
58+
},
59+
/** 滑块值 */
60+
value: {
61+
type: [Number, Array] as PropType<TdSliderProps['value']>,
62+
default: undefined as TdSliderProps['value'],
63+
},
64+
modelValue: {
65+
type: [Number, Array] as PropType<TdSliderProps['value']>,
66+
default: undefined as TdSliderProps['value'],
67+
},
68+
/** 滑块值，非受控属性 */
69+
defaultValue: {
70+
type: [Number, Array] as PropType<TdSliderProps['defaultValue']>,
71+
default: 0 as TdSliderProps['defaultValue'],
72+
},
73+
/** 滑块值变化时触发 */
74+
onChange: Function as PropType<TdSliderProps['onChange']>,
75+
/** 松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用 */
76+
onChangeEnd: Function as PropType<TdSliderProps['onChangeEnd']>,
77+
};

‎packages/products/tdesign-vue-next/src/slider/slider.en-US.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
:: BASE_DOC ::
2+
3+
## API
4+
5+
### Slider Props
6+
7+
name | type | default | description | required
8+
-- | -- | -- | -- | --
9+
disabled | Boolean | false | \- | N
10+
inputNumberProps | Boolean / Object | false | Typescript：`boolean \| InputNumberProps`，[InputNumber API Documents](./input-number?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
11+
label | String / Boolean / Slot / Function | true | Typescript：`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
12+
layout | String | horizontal | options: vertical/horizontal | N
13+
marks | Object / Array | - | Typescript：`Array<number> \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
14+
max | Number | 100 | \- | N
15+
min | Number | 0 | \- | N
16+
range | Boolean | false | \- | N
17+
showStep | Boolean | false | \- | N
18+
step | Number | 1 | \- | N
19+
tooltipProps | Object | - | Typescript：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
20+
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-vue-next/tree/develop/src/slider/type.ts) | N
21+
defaultValue | Number / Array | 0 | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
22+
onChange | Function | | Typescript：`(value: SliderValue) => void`<br/> | N
23+
onChangeEnd | Function | | Typescript：`(value: SliderValue) => void`<br/>triggered when the mouse button is released after dragging or clicking on the slider bar. It is suitable for scenarios where you do not want the callback to be triggered frequently during the process of dragging the slider | N
24+
25+
### Slider Events
26+
27+
name | params | description
28+
-- | -- | --
29+
change | `(value: SliderValue)` | \-
30+
change-end | `(value: SliderValue)` | triggered when the mouse button is released after dragging or clicking on the slider bar. It is suitable for scenarios where you do not want the callback to be triggered frequently during the process of dragging the slider

‎packages/products/tdesign-vue-next/src/slider/slider.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
:: BASE_DOC ::
2+
3+
## API
4+
5+
### Slider Props
6+
7+
名称 | 类型 | 默认值 | 说明 | 必传
8+
-- | -- | -- | -- | --
9+
disabled | Boolean | false | 是否禁用组件 | N
10+
inputNumberProps | Boolean / Object | false | 用于控制数字输入框组件，值为 false 表示不显示数字输入框；值为 true 表示呈现默认数字输入框；值类型为 Object 表示透传属性到数字输入框组件。TS 类型：`boolean \| InputNumberProps`，[InputNumber API Documents](./input-number?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
11+
label | String / Boolean / Slot / Function | true | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
12+
layout | String | horizontal | 滑块布局方向。可选项：vertical/horizontal | N
13+
marks | Object / Array | - | 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`。TS 类型：`Array<number> \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
14+
max | Number | 100 | 滑块范围最大值 | N
15+
min | Number | 0 | 滑块范围最小值 | N
16+
range | Boolean | false | 双游标滑块 | N
17+
showStep | Boolean | false | 控制步长刻度值显示 | N
18+
step | Number | 1 | 步长 | N
19+
tooltipProps | Object | - | 透传提示组件属性。TS 类型：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
20+
value | Number / Array | 0 | 滑块值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
21+
defaultValue | Number / Array | 0 | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
22+
onChange | Function | | TS 类型：`(value: SliderValue) => void`<br/>滑块值变化时触发 | N
23+
onChangeEnd | Function | | TS 类型：`(value: SliderValue) => void`<br/>松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用 | N
24+
25+
### Slider Events
26+
27+
名称 | 参数 | 描述
28+
-- | -- | --
29+
change | `(value: SliderValue)` | 滑块值变化时触发
30+
change-end | `(value: SliderValue)` | 松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用

‎packages/products/tdesign-vue-next/src/slider/type.ts

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/* eslint-disable */
2+
3+
/**
4+
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
5+
* */
6+
7+
import { InputNumberProps } from '../input-number';
8+
import { TooltipProps } from '../tooltip';
9+
import { TNode } from '../common';
10+
11+
export interface TdSliderProps {
12+
/**
13+
* 是否禁用组件
14+
* @default false
15+
*/
16+
disabled?: boolean;
17+
/**
18+
* 用于控制数字输入框组件，值为 false 表示不显示数字输入框；值为 true 表示呈现默认数字输入框；值类型为 Object 表示透传属性到数字输入框组件
19+
* @default false
20+
*/
21+
inputNumberProps?: boolean | InputNumberProps;
22+
/**
23+
* 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值
24+
* @default true
25+
*/
26+
label?: string | boolean | TNode<{ value: SliderValue; position?: 'start' | 'end' }>;
27+
/**
28+
* 滑块布局方向
29+
* @default horizontal
30+
*/
31+
layout?: 'vertical' | 'horizontal';
32+
/**
33+
* 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`
34+
*/
35+
marks?: Array<number> | SliderMarks;
36+
/**
37+
* 滑块范围最大值
38+
* @default 100
39+
*/
40+
max?: number;
41+
/**
42+
* 滑块范围最小值
43+
* @default 0
44+
*/
45+
min?: number;
46+
/**
47+
* 双游标滑块
48+
* @default false
49+
*/
50+
range?: boolean;
51+
/**
52+
* 控制步长刻度值显示
53+
* @default false
54+
*/
55+
showStep?: boolean;
56+
/**
57+
* 步长
58+
* @default 1
59+
*/
60+
step?: number;
61+
/**
62+
* 透传提示组件属性
63+
*/
64+
tooltipProps?: TooltipProps;
65+
/**
66+
* 滑块值
67+
* @default 0
68+
*/
69+
value?: SliderValue;
70+
/**
71+
* 滑块值，非受控属性
72+
* @default 0
73+
*/
74+
defaultValue?: SliderValue;
75+
/**
76+
* 滑块值
77+
* @default 0
78+
*/
79+
modelValue?: SliderValue;
80+
/**
81+
* 滑块值变化时触发
82+
*/
83+
onChange?: (value: SliderValue) => void;
84+
/**
85+
* 松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用
86+
*/
87+
onChangeEnd?: (value: SliderValue) => void;
88+
}
89+
90+
export interface SliderMarks {
91+
[mark: number]: string | TNode<{ value: number }>;
92+
}
93+
94+
export type SliderValue = number | Array<number>;

0 commit comments

Comments
 (0)