diff --git a/components/time-picker/time-picker.tsx b/components/time-picker/time-picker.tsx
index 025348ebb6..f9d7444383 100644
--- a/components/time-picker/time-picker.tsx
+++ b/components/time-picker/time-picker.tsx
@@ -77,6 +77,34 @@ function createTimePicker< }); const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker as any; + + const usePickerExpose = (pickerRef: Ref) => ({
+ focus: () => pickerRef.value?.focus?.(),
+ blur: () => pickerRef.value?.blur?.(),
+ });
+
+ const useFormItemEvents = (emit: any, formItemContext: any) => ({
+ onChange: (value: any, dateString: any) => {
+ emit('update:value', value);
+ emit('change', value, dateString);
+ formItemContext.onFieldChange();
+ },
+ onBlur: (e: FocusEvent) => {
+ emit('blur', e);
+ formItemContext.onFieldBlur();
+ }
+ });
+
+ const useCommonEvents = (emit: any) => ({
+ onOpenChange: (open: boolean) => {
+ emit('update:open', open);
+ emit('openChange', open);
+ },
+ onFocus: (e: FocusEvent) => {
+ emit('focus', e);
+ }
+ });
+
 const TimePicker = defineComponent<dtimepickerprops>({
 name: 'ATimePicker',
 inheritAttrs: false,
@@ -96,53 +124,37 @@ function createTimePicker< setup(p, { slots, expose, emit, attrs }) { const props = p as unknown as DTimePickerProps; const formItemContext = useInjectFormItemContext(); + const pickerRef = ref(); + devWarning( !(slots.addon &#124;&#124; props.addon), 'TimePicker', '`addon` is deprecated. Please use `v-slot:renderExtraFooter` instead.', ); - const pickerRef = ref(); - expose({ - focus: () => {
- pickerRef.value?.focus();
- },
- blur: () => {
- pickerRef.value?.blur();
- },
- });
- const onChange = (value: DateType &#124; string, dateString: string) => {
- emit('update:value', value);
- emit('change', value, dateString);
- formItemContext.onFieldChange();
- };
- const onOpenChange = (open: boolean) => {
- emit('update:open', open);
- emit('openChange', open);
- };
- const onFocus = (e: FocusEvent) => {
- emit('focus', e);
- };
- const onBlur = (e: FocusEvent) => {
- emit('blur', e);
- formItemContext.onFieldBlur();
- };
+ 
+ expose(usePickerExpose(pickerRef));
+ 
+ const { onChange, onBlur } = useFormItemEvents(emit, formItemContext);
+ const { onOpenChange, onFocus } = useCommonEvents(emit);
+ 
 const onOk = (value: DateType) => {
 emit('ok', value);
 };
+ 
 return () => {
 const { id = formItemContext.id.value } = props;
- //restProps.addon
+ const renderExtraFooter = props.addon &#124;&#124; slots.addon &#124;&#124; props.renderExtraFooter &#124;&#124; slots.renderExtraFooter;
+ const omittedProps = omit(props, ['onUpdate:value', 'onUpdate:open']);
+ 
 return (
 <internaltimepicker {...attrs} - {...omit(props, ['onUpdate:value', 'onUpdate:open'])} + {...omittedProps} id={id} dropdownClassName={props.popupClassName} mode={undefined} ref={pickerRef} - renderExtraFooter={ - props.addon &#124;&#124; slots.addon &#124;&#124; props.renderExtraFooter &#124;&#124; slots.renderExtraFooter - } + renderExtraFooter={renderExtraFooter} onOpenChange={onOpenChange} @@ -174,42 +186,23 @@ function createTimePicker< const props = p as unknown as DTimeRangePickerProps; const pickerRef = ref(); const formItemContext = useInjectFormItemContext(); - expose({ - focus: () => {
- pickerRef.value?.focus();
- },
- blur: () => {
- pickerRef.value?.blur();
- },
- });
- const onChange = (
- values: RangeValue<string> &#124; RangeValue<datetype>,
- dateStrings: [string, string],
- ) => {
- emit('update:value', values);
- emit('change', values, dateStrings);
- formItemContext.onFieldChange();
- };
- const onOpenChange = (open: boolean) => {
- emit('update:open', open);
- emit('openChange', open);
- };
- const onFocus = (e: FocusEvent) => {
- emit('focus', e);
- };
- const onBlur = (e: FocusEvent) => {
- emit('blur', e);
- formItemContext.onFieldBlur();
- };
+ 
+ expose(usePickerExpose(pickerRef));
+ 
+ const { onChange, onBlur } = useFormItemEvents(emit, formItemContext);
+ const { onOpenChange, onFocus } = useCommonEvents(emit);
+ 
 const onPanelChange = (
 values: RangeValue<string> &#124; RangeValue<datetype>,
 modes: [PanelMode, PanelMode],
 ) => {
 emit('panelChange', values, modes);
 };
+ 
 const onOk = (values: RangeValue<string &#124; DateType>) => {
 emit('ok', values);
 };
+ 
 const onCalendarChange: RangePickerSharedProps<datetype>['onCalendarChange'] = (
 values: RangeValue<string> &#124; RangeValue<datetype>,
 dateStrings: [string, string],
@@ -217,12 +210,15 @@ function createTimePicker< ) => {
 emit('calendarChange', values, dateStrings, info);
 };
+ 
 return () => {
 const { id = formItemContext.id.value } = props;
+ const omittedProps = omit(props, ['onUpdate:open', 'onUpdate:value'] as any);
+ 
 return (
 <internalrangepicker
 {...attrs}
- {...omit(props, ['onUpdate:open', 'onUpdate:value'] as any)}
+ {...omittedProps}
 id={id}
 dropdownClassName={props.popupClassName}
 picker="time"
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/vueComponent/ant-design-vue/pull/8342.diff">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/vueComponent/ant-design-vue/pull/8342.diff" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>