fix(TimePicker): 修复 FTimePicker 组件清空值, 选择时间没有消失的问题 (#723)

* fix: 修复timepicker组件清空值,选择时间没有消失的问题 * feat: pr问题修改 --------- Co-authored-by: blankzhang <blankzhang@blankzhangdeMac-mini.local>
WeBankFinTech · Apr 9, 2024 · 6e6b22e · 6e6b22e
1 parent f4c0be7
commit 6e6b22e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/components/time-picker/time-picker.vue b/components/time-picker/time-picker.vue
@@ -34,6 +34,7 @@
         <template #default>
             <div :class="`${prefixCls}-dropdown`" @mousedown.prevent>
                 <TimeSelect
+                    ref="timeSelectRef"
                     :visible="isOpened"
                     :modelValue="currentValue"
                     :format="format"
@@ -148,7 +149,8 @@ function validateTime(data: string, format: string) {
 
 export const timePickerProps = {
     modelValue: {
-        type: [String, Array] as PropType<string | string[] | number[]>,
+        // timePicker 目前仅支持string
+        type: String,
         default: '',
     },
     open: {
@@ -274,6 +276,7 @@ export default defineComponent({
             return true;
         });
 
+        // 临时的值
         const tempValue = ref();
 
         const { t } = useLocale();
@@ -296,11 +299,22 @@ export default defineComponent({
                 activeTime.value = val;
             }
         };
+        // 获取 实例
+        const timeSelectRef = ref();
+
+        // 解耦 与设置值的方法分开
         const clear = () => {
-            setCurrentValue('');
+            tempValue.value = '';
+            updateCurrentValue('');
+            activeTime.value = '';
+            emit('change', '');
+            validate('change');
+            // 重置时间
+            timeSelectRef.value.resetTime();
         };
 
         watch(isOpened, () => {
+            // 关闭将选中的数据赋值，因此确认按钮只用关闭弹窗即可
             if (!isOpened.value && activeTime.value) {
                 setCurrentValue(activeTime.value);
             }
@@ -321,7 +335,9 @@ export default defineComponent({
             closePopper();
         };
 
+        // 输入框展示的值
         const displayValue = computed(() => {
+            // 目前没有范围选择
             if (props.isRange) {
                 return currentValue.value || [];
             }
@@ -347,9 +363,7 @@ export default defineComponent({
             displayValue,
             isOpened,
             currentValue,
-
             tempValue,
-
             handleInput,
             handleBlur,
             clear,
@@ -358,12 +372,11 @@ export default defineComponent({
             showNowShortcut,
             setCurrentTime,
             confirmChangeTime,
-
             activeTime,
             inputPlaceholder,
             t,
-
             attrs,
+            timeSelectRef,
         };
     },
 });

diff --git a/components/time-picker/time-select.vue b/components/time-picker/time-select.vue
@@ -118,6 +118,12 @@ const timeSelectProps = {
         default: 8,
     },
 } as const satisfies ComponentObjectPropsOptions;
+// 初始选择的时间
+const initialSelectedTime: SelectedTime = {
+    hour: null,
+    minute: null,
+    seconds: null,
+};
 
 export default defineComponent({
     components: {
@@ -132,14 +138,18 @@ export default defineComponent({
             4: -1,
         });
 
-        const initialSelectedTime: SelectedTime = {
-            hour: null,
-            minute: null,
-            seconds: null,
-        };
+        // 被选中的时间
         const selectedTime = reactive<SelectedTime>({ ...initialSelectedTime });
+
         const formatSingleTime = (timeFormat: string) =>
             props.format.indexOf(timeFormat) !== -1 ? '00' : '0';
+
+        // 重置时间
+        const resetTime = () => {
+            Object.assign(selectedTime, initialSelectedTime);
+        };
+
+        // 解析时间
         const parseTime = () => {
             if (!props.modelValue) {
                 Object.assign(selectedTime, initialSelectedTime);
@@ -271,6 +281,7 @@ export default defineComponent({
             changeSelectedSeconds,
             focusKey,
             selectedTime,
+            resetTime,
         };
     },
 });