feat(TimePicker): support readonly

Tencent · Dec 5, 2024 · 5ce46fa · 5ce46fa
1 parent c76c638
commit 5ce46fa
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/src/time-picker/props.ts b/src/time-picker/props.ts
@@ -54,6 +54,11 @@ export default {
   presets: {
     type: Object as PropType<TdTimePickerProps['presets']>,
   },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 透传 SelectInput 筛选器输入框组件的全部属性 */
   selectInputProps: {
     type: Object as PropType<TdTimePickerProps['selectInputProps']>,

diff --git a/src/time-picker/time-picker.tsx b/src/time-picker/time-picker.tsx
@@ -110,7 +110,7 @@ export default defineComponent({
           class={inputClasses.value}
           label={props.label}
           suffixIcon={() => <TimeIcon />}
-          popupVisible={isShowPanel.value}
+          popupVisible={!props.readonly && isShowPanel.value}
           onInputChange={handleInputChange}
           onBlur={handleInputBlur}
           onPopupVisibleChange={handleShowPopup}

diff --git a/src/time-picker/time-range-picker-props.ts b/src/time-picker/time-range-picker-props.ts
@@ -59,6 +59,11 @@ export default {
   rangeInputProps: {
     type: Object as PropType<TdTimeRangePickerProps['rangeInputProps']>,
   },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 尺寸 */
   size: {
     type: String as PropType<TdTimeRangePickerProps['size']>,

diff --git a/src/time-picker/time-range-picker.tsx b/src/time-picker/time-range-picker.tsx
@@ -19,6 +19,7 @@ import useVModel from '../hooks/useVModel';
 import { useCommonClassName, useConfig, usePrefixClass } from '../hooks/useConfig';
 import { useGlobalIcon } from '../hooks/useGlobalIcon';
 import { useDisabled } from '../hooks/useDisabled';
+import { useReadonly } from '../hooks/useReadonly';
 
 dayjs.extend(customParseFormat);
 
@@ -37,6 +38,7 @@ export default defineComponent({
     const currentPanelIdx = ref(undefined);
     const currentValue = ref<Array<string>>(TIME_PICKER_EMPTY);
     const isShowPanel = ref(false);
+    const isReadOnly = useReadonly();
 
     const inputClasses = computed(() => [
       `${COMPONENT_NAME.value}__group`,
@@ -48,6 +50,7 @@ export default defineComponent({
     const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange as any);
 
     const handleShowPopup = (visible: boolean, context: any) => {
+      if (isReadOnly.value) return;
       // 输入框点击不关闭面板
       if (context.trigger === 'trigger-element-click') {
         isShowPanel.value = true;
@@ -173,7 +176,7 @@ export default defineComponent({
             onClick: handleClick,
             onFocus: handleFocus,
             onBlur: handleInputBlur,
-            readonly: !allowInput.value,
+            readonly: props.readonly || !allowInput.value,
             activeIndex: currentPanelIdx.value,
             ...props.rangeInputProps,
           }}