Skip to content

Commit 6e38ca2

Browse files
anlyyaoliweijie0812github-actions[bot]
authored
feat(Picker): add wheel-config prop (#825)
* feat(Picker): add wheel-config prop * docs(Picker): 移除 wheelConfig 属性文档 * docs(Picker): 添加 wheelConfig 属性文档 --------- Co-authored-by: liweijie <674416404@qq.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent bfa5c45 commit 6e38ca2

File tree

6 files changed

+62
-4
lines changed

6 files changed

+62
-4
lines changed

db/TDesign.db

4 KB
Binary file not shown.

packages/products/tdesign-mobile-vue/src/picker/picker.en-US.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ swipeDuration | String / Number | 300 | The duration of inertial scrolling durin
1818
title | String | '' | \- | N
1919
value | Array | - | `v-model` and `v-model:value` is supported。Typescript: `Array<PickerValue>` `type PickerValue = string \| number`[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N
2020
defaultValue | Array | - | uncontrolled property。Typescript: `Array<PickerValue>` `type PickerValue = string \| number`[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N
21+
wheelConfig | Object | - | Typescript: `PickerWheelConfig ` `interface PickerWheelConfig { inertiaDuration?: number; bounceDuration?: number; transitionDuration?: number; inertiaTimeThreshold?: number; inertiaDistanceThreshold?: number; boundOffset?: number; clickDistanceThreshold?: number; clickTimeThreshold?: number;}`[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N
2122
onCancel | Function | | Typescript: `(context: { e: MouseEvent }) => void`<br/> | N
2223
onChange | Function | | Typescript: `(value: Array<PickerValue>, context: { columns: Array<PickerContext>, e: MouseEvent }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。<br/>`interface PickerContext{ column: number,index: number }`<br/> | N
2324
onConfirm | Function | | Typescript: `(value: Array<PickerValue>, context: { index: number[], e: MouseEvent, label: string[] }) => void`<br/> | N

packages/products/tdesign-mobile-vue/src/picker/picker.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@ header | Slot / Function | - | 自定义头部内容。TS 类型:`TNode`。[
1414
keys | Object | - | 用来定义 value / label / disabled 在 `columns ` 中对应的字段别名。TS 类型:`KeysType`[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
1515
option | Slot / Function | - | 自定义选项内容。参数为 `option: PickerColumnItem, index: number`。TS 类型:`(option: PickerColumnItem, index: number) => string \| Record<string, string \| boolean>` | N
1616
renderLabel | Function | - | 自定义label。TS 类型:`(item: PickerColumnItem, index: number) => string` | N
17-
swipeDuration | String / Number | 300 | 快速滑动时惯性滚动的时长,单位 ms,为 0 时表示取消惯性滚动。TS 类型:`string \| number` | N
17+
swipeDuration | String / Number | 300 | ⚠️ 即将废弃,请使用 `wheelConfig.inertiaDuration` 代替。快速滑动时惯性滚动的时长,单位 ms,为 0 时表示取消惯性滚动。TS 类型:`string \| number` | N
1818
title | String | '' | 标题 | N
1919
value | Array | - | 选中值。支持语法糖 `v-model``v-model:value`。TS 类型:`Array<PickerValue>` `type PickerValue = string \| number`[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N
2020
defaultValue | Array | - | 选中值。非受控属性。TS 类型:`Array<PickerValue>` `type PickerValue = string \| number`[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N
21+
wheelConfig | Object | - | 【实验】滚轮滑动相关配置,用于自定义滚轮的动画和交互行为。`inertiaDuration` 表示惯性滚动的持续时长;`bounceDuration` 表示边界归位动画时长;`transitionDuration` 表示切换选项时的过渡动画时长; `inertiaTimeThreshold` 表示惯性触发的时间阈值; `inertiaDistanceThreshold` 表示惯性触发的距离阈值; `boundOffset` 表示边界偏移量;`clickDistanceThreshold` 表示点击操作的距离阈值;`clickTimeThreshold` 表示点击操作的时间阈值。TS 类型:`PickerWheelConfig ` `interface PickerWheelConfig { inertiaDuration?: number; bounceDuration?: number; transitionDuration?: number; inertiaTimeThreshold?: number; inertiaDistanceThreshold?: number; boundOffset?: number; clickDistanceThreshold?: number; clickTimeThreshold?: number;}`[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N
2122
onCancel | Function | | TS 类型:`(context: { e: MouseEvent }) => void`<br/>点击取消按钮时触发 | N
2223
onChange | Function | | TS 类型:`(value: Array<PickerValue>, context: { columns: Array<PickerContext>, e: MouseEvent }) => void`<br/>选中变化时候触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts)。<br/>`interface PickerContext{ column: number,index: number }`<br/> | N
2324
onConfirm | Function | | TS 类型:`(value: Array<PickerValue>, context: { index: number[], e: MouseEvent, label: string[] }) => void`<br/>点击确认按钮时触发 | N

packages/products/tdesign-mobile-vue/src/picker/props.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default {
4444
renderLabel: {
4545
type: Function as PropType<TdPickerProps['renderLabel']>,
4646
},
47-
/** 快速滑动时惯性滚动的时长,单位 ms,为 0 时表示取消惯性滚动 */
47+
/** ⚠️ 即将废弃,请使用 `wheelConfig.inertiaDuration` 代替。快速滑动时惯性滚动的时长,单位 ms,为 0 时表示取消惯性滚动 */
4848
swipeDuration: {
4949
type: [String, Number] as PropType<TdPickerProps['swipeDuration']>,
5050
default: 300 as TdPickerProps['swipeDuration'],
@@ -67,6 +67,10 @@ export default {
6767
defaultValue: {
6868
type: Array as PropType<TdPickerProps['defaultValue']>,
6969
},
70+
/** 【实验】滚轮滑动相关配置,用于自定义滚轮的动画和交互行为。`inertiaDuration` 表示惯性滚动的持续时长;`bounceDuration` 表示边界归位动画时长;`transitionDuration` 表示切换选项时的过渡动画时长; `inertiaTimeThreshold` 表示惯性触发的时间阈值; `inertiaDistanceThreshold` 表示惯性触发的距离阈值; `boundOffset` 表示边界偏移量;`clickDistanceThreshold` 表示点击操作的距离阈值;`clickTimeThreshold` 表示点击操作的时间阈值 */
71+
wheelConfig: {
72+
type: Object as PropType<TdPickerProps['wheelConfig']>,
73+
},
7074
/** 点击取消按钮时触发 */
7175
onCancel: Function as PropType<TdPickerProps['onCancel']>,
7276
/** 选中变化时候触发 */

packages/products/tdesign-mobile-vue/src/picker/type.ts

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export interface TdPickerProps {
4343
*/
4444
renderLabel?: (item: PickerColumnItem, index: number) => string;
4545
/**
46-
* 快速滑动时惯性滚动的时长,单位 ms,为 0 时表示取消惯性滚动
46+
* ⚠️ 即将废弃,请使用 `wheelConfig.inertiaDuration` 代替。快速滑动时惯性滚动的时长,单位 ms,为 0 时表示取消惯性滚动
4747
* @default 300
4848
*/
4949
swipeDuration?: string | number;
@@ -64,6 +64,10 @@ export interface TdPickerProps {
6464
* 选中值
6565
*/
6666
modelValue?: Array<PickerValue>;
67+
/**
68+
* 【实验】滚轮滑动相关配置,用于自定义滚轮的动画和交互行为。`inertiaDuration` 表示惯性滚动的持续时长;`bounceDuration` 表示边界归位动画时长;`transitionDuration` 表示切换选项时的过渡动画时长; `inertiaTimeThreshold` 表示惯性触发的时间阈值; `inertiaDistanceThreshold` 表示惯性触发的距离阈值; `boundOffset` 表示边界偏移量;`clickDistanceThreshold` 表示点击操作的距离阈值;`clickTimeThreshold` 表示点击操作的时间阈值
69+
*/
70+
wheelConfig?: PickerWheelConfig;
6771
/**
6872
* 点击取消按钮时触发
6973
* @default ''
@@ -96,6 +100,17 @@ export interface PickerColumnItem {
96100

97101
export type PickerValue = string | number;
98102

103+
export interface PickerWheelConfig {
104+
inertiaDuration?: number;
105+
bounceDuration?: number;
106+
transitionDuration?: number;
107+
inertiaTimeThreshold?: number;
108+
inertiaDistanceThreshold?: number;
109+
boundOffset?: number;
110+
clickDistanceThreshold?: number;
111+
clickTimeThreshold?: number;
112+
}
113+
99114
export interface PickerContext {
100115
column: number;
101116
index: number;

packages/scripts/api.json

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92790,7 +92790,7 @@
9279092790
],
9279192791
"field_default_value": "300",
9279292792
"field_enum": "",
92793-
"field_desc_zh": "快速滑动时惯性滚动的时长,单位 ms,为 0 时表示取消惯性滚动",
92793+
"field_desc_zh": "⚠️ 即将废弃,请使用 `wheelConfig.inertiaDuration` 代替。快速滑动时惯性滚动的时长,单位 ms,为 0 时表示取消惯性滚动",
9279492794
"field_desc_en": "The duration of inertial scrolling during fast swiping, in milliseconds (ms). When set to 0, it disables inertial scrolling.",
9279592795
"field_required": 0,
9279692796
"event_input": "",
@@ -93095,6 +93095,43 @@
9309593095
"Number"
9309693096
]
9309793097
},
93098+
{
93099+
"id": 1773297544,
93100+
"platform_framework": [
93101+
"8"
93102+
],
93103+
"component": "Picker",
93104+
"field_category": 1,
93105+
"field_name": "wheelConfig",
93106+
"field_type": [
93107+
"8"
93108+
],
93109+
"field_default_value": "",
93110+
"field_enum": "",
93111+
"field_desc_zh": "【实验】滚轮滑动相关配置,用于自定义滚轮的动画和交互行为。`inertiaDuration` 表示惯性滚动的持续时长;`bounceDuration` 表示边界归位动画时长;`transitionDuration` 表示切换选项时的过渡动画时长; `inertiaTimeThreshold` 表示惯性触发的时间阈值; `inertiaDistanceThreshold` 表示惯性触发的距离阈值; `boundOffset` 表示边界偏移量;`clickDistanceThreshold` 表示点击操作的距离阈值;`clickTimeThreshold` 表示点击操作的时间阈值",
93112+
"field_desc_en": null,
93113+
"field_required": 0,
93114+
"event_input": "",
93115+
"create_time": "2026-03-12 06:39:04",
93116+
"update_time": "2026-03-12 06:39:04",
93117+
"event_output": null,
93118+
"custom_field_type": "PickerWheelConfig 【interface PickerWheelConfig { inertiaDuration?: number; bounceDuration?: number; transitionDuration?: number; inertiaTimeThreshold?: number; inertiaDistanceThreshold?: number; boundOffset?: number; clickDistanceThreshold?: number; clickTimeThreshold?: number;}】",
93119+
"syntactic_sugar": null,
93120+
"readonly": 1,
93121+
"html_attribute": 0,
93122+
"trigger_elements": "",
93123+
"deprecated": 0,
93124+
"version": "{\n\"Mobile(Vue)\":\"1.13.1\" \n}",
93125+
"test_description": null,
93126+
"support_default_value": 0,
93127+
"field_category_text": "Props",
93128+
"platform_framework_text": [
93129+
"Vue(Mobile)"
93130+
],
93131+
"field_type_text": [
93132+
"Object"
93133+
]
93134+
},
9309893135
{
9309993136
"id": 1475,
9310093137
"platform_framework": [

0 commit comments

Comments
 (0)