diff --git a/src/time-picker/props.ts b/src/time-picker/props.ts index 8bf866296f..5f5dc44ddb 100644 --- a/src/time-picker/props.ts +++ b/src/time-picker/props.ts @@ -34,6 +34,10 @@ export default { inputProps: { type: Object as PropType, }, + /** 左侧文本 */ + label: { + type: [String, Function] as PropType, + }, /** 占位符 */ placeholder: { type: String, diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md index f04eec7d09..5922c1a9f9 100644 --- a/src/time-picker/time-picker.en-US.md +++ b/src/time-picker/time-picker.en-US.md @@ -14,6 +14,7 @@ disabled | Boolean | - | \- | N format | String | HH:mm:ss | \- | N hideDisabledTime | Boolean | true | \- | N inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N +label | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N placeholder | String | undefined | \- | N popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N presets | Object | - | Typescript:`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N @@ -51,11 +52,13 @@ pick | `(value: TimePickerValue, context: { e: MouseEvent })` | \- name | type | default | description | required -- | -- | -- | -- | -- allowInput | Boolean | false | \- | N +borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N disableTime | Function | - | Typescript:`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N disabled | Boolean / Array | - | Typescript:`boolean \| Array` | N format | String | HH:mm:ss | \- | N hideDisabledTime | Boolean | true | \- | N +label | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N placeholder | String / Array | undefined | Typescript:`string \| Array` | N popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N presets | Object | - | Typescript:`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md index 885b359431..3b54479a8a 100644 --- a/src/time-picker/time-picker.md +++ b/src/time-picker/time-picker.md @@ -14,6 +14,7 @@ disabled | Boolean | - | 是否禁用组件 | N format | String | HH:mm:ss | 用于格式化时间,[详细文档](https://day.js.org/docs/en/display/format) | N hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N inputProps | Object | - | 透传给输入框(Input)组件的参数。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N +label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N placeholder | String | undefined | 占位符 | N popupProps | Object | - | 透传给 popup 组件的参数。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N presets | Object | - | 预设快捷时间选择,示例:`{ '前一小时': '11:00:00' }`。TS 类型:`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N @@ -56,6 +57,7 @@ disableTime | Function | - | 禁用时间项。TS 类型:`(h: number, m: numbe disabled | Boolean / Array | - | 是否禁用组件,值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型:`boolean \| Array` | N format | String | HH:mm:ss | 用于格式化时间,[详细文档](https://day.js.org/docs/en/display/format) | N hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N +label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N placeholder | String / Array | undefined | 占位符,值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型:`string \| Array` | N popupProps | Object | - | 透传给 popup 组件的参数。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N presets | Object | - | 预设快捷时间范围选择,示例:{ '下午': ['13:00:00', '18:00:00'] }。TS 类型:`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N diff --git a/src/time-picker/time-picker.tsx b/src/time-picker/time-picker.tsx index c22b70822e..dde448f801 100755 --- a/src/time-picker/time-picker.tsx +++ b/src/time-picker/time-picker.tsx @@ -108,6 +108,7 @@ export default defineComponent({ clearable={props.clearable} allowInput={allowInput.value} class={inputClasses.value} + label={props.label} suffixIcon={() => } popupVisible={isShowPanel.value} onInputChange={handleInputChange} diff --git a/src/time-picker/time-range-picker-props.ts b/src/time-picker/time-range-picker-props.ts index ed82bb9ed3..1a13f93857 100644 --- a/src/time-picker/time-range-picker-props.ts +++ b/src/time-picker/time-range-picker-props.ts @@ -30,6 +30,10 @@ export default { type: Boolean, default: true, }, + /** 左侧文本 */ + label: { + type: [String, Function] as PropType, + }, /** 占位符,值为数组表示可分别为开始日期和结束日期设置占位符 */ placeholder: { type: [String, Array] as PropType, diff --git a/src/time-picker/time-range-picker.tsx b/src/time-picker/time-range-picker.tsx index bc70d50a8a..16e6c93c14 100644 --- a/src/time-picker/time-range-picker.tsx +++ b/src/time-picker/time-range-picker.tsx @@ -163,6 +163,7 @@ export default defineComponent({ activeIndex: currentPanelIdx.value, ...props.rangeInputProps, }} + label={props.label} status={props.status} tips={props.tips} panel={() => ( diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts index 5cd126790c..a3ac85e128 100644 --- a/src/time-picker/type.ts +++ b/src/time-picker/type.ts @@ -54,6 +54,10 @@ export interface TdTimePickerProps { * 透传给输入框(Input)组件的参数 */ inputProps?: InputProps; + /** + * 左侧文本 + */ + label?: string | TNode; /** * 占位符 */ @@ -172,6 +176,10 @@ export interface TdTimeRangePickerProps { * @default true */ hideDisabledTime?: boolean; + /** + * 左侧文本 + */ + label?: string | TNode; /** * 占位符,值为数组表示可分别为开始日期和结束日期设置占位符 */