diff --git a/src/select-input/props.ts b/src/select-input/props.ts index afffb1b6f3..3571fda58b 100644 --- a/src/select-input/props.ts +++ b/src/select-input/props.ts @@ -82,7 +82,10 @@ export default { type: Function as PropType, }, /** 只读状态,值为真会隐藏输入框,且无法打开下拉框 */ - readonly: Boolean, + readonly: { + type: Boolean, + default: undefined, + }, /** 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 */ reserveKeyword: Boolean, /** 组件尺寸 */ diff --git a/src/select-input/select-input.en-US.md b/src/select-input/select-input.en-US.md index 5c4d87db4c..9c19dfc7da 100644 --- a/src/select-input/select-input.en-US.md +++ b/src/select-input/select-input.en-US.md @@ -12,7 +12,7 @@ autofocus | Boolean | false | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N collapsedItems | Slot / Function | - | Typescript:`TNode<{ value: SelectInputValue; collapsedSelectedItems: SelectInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -disabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | 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/select-input/type.ts) | N inputValue | String / Number | - | input value。`v-model:inputValue` is supported。Typescript:`string` | N defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript:`string` | N @@ -27,7 +27,7 @@ popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./po popupVisible | Boolean | - | `v-model:popupVisible` is supported | N defaultPopupVisible | Boolean | - | uncontrolled property | N prefixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -readonly | Boolean | false | \- | N +readonly | Boolean | undefined | \- | N reserveKeyword | Boolean | false | \- | N size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N status | String | default | options: default/success/warning/error | N @@ -63,4 +63,4 @@ mouseenter | `(context: { e: MouseEvent })` | trigger on mouseenter mouseleave | `(context: { e: MouseEvent })` | trigger on mouseleave paste | `(context: { e: ClipboardEvent; pasteValue: string })` | \- popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
-tag-change | `(value: TagInputValue, context: SelectInputChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。
`type SelectInputChangeContext = TagInputChangeContext`
\ No newline at end of file +tag-change | `(value: TagInputValue, context: SelectInputChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。
`type SelectInputChangeContext = TagInputChangeContext`
diff --git a/src/select-input/select-input.md b/src/select-input/select-input.md index 2e0f111fe7..658ec646a0 100644 --- a/src/select-input/select-input.md +++ b/src/select-input/select-input.md @@ -12,7 +12,7 @@ autofocus | Boolean | false | 自动聚焦 | N borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否可清空 | N collapsedItems | Slot / Function | - | 标签过多的情况下,折叠项内容,默认为 `+N`。如果需要悬浮就显示其他内容,可以使用 `collapsedItems` 自定义。`value` 表示所有标签值,`collapsedSelectedItems` 表示折叠标签值,`count` 表示折叠的数量,`onClose` 表示移除标签的事件回调。TS 类型:`TNode<{ value: SelectInputValue; collapsedSelectedItems: SelectInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -disabled | Boolean | - | 是否禁用 | N +disabled | Boolean | undefined | 是否禁用 | N inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N inputValue | String / Number | - | 输入框的值。支持语法糖 `v-model:inputValue`。TS 类型:`string` | N defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型:`string` | N @@ -27,7 +27,7 @@ popupProps | Object | - | 透传 Popup 浮层组件全部属性。TS 类型:`P popupVisible | Boolean | - | 是否显示下拉框。支持语法糖 `v-model:popupVisible` | N defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N prefixIcon | Slot / Function | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -readonly | Boolean | false | 只读状态,值为真会隐藏输入框,且无法打开下拉框 | N +readonly | Boolean | undefined | 只读状态,值为真会隐藏输入框,且无法打开下拉框 | N reserveKeyword | Boolean | false | 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 | N size | String | medium | 组件尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N status | String | default | 输入框状态。可选项:default/success/warning/error | N @@ -63,4 +63,4 @@ mouseenter | `(context: { e: MouseEvent })` | 进入输入框时触发 mouseleave | `(context: { e: MouseEvent })` | 离开输入框时触发 paste | `(context: { e: ClipboardEvent; pasteValue: string })` | 粘贴事件,`pasteValue` 表示粘贴板的内容 popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 下拉框显示或隐藏时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
-tag-change | `(value: TagInputValue, context: SelectInputChangeContext)` | 值变化时触发,参数 `context.trigger` 表示数据变化的触发来源;`context.index` 指当前变化项的下标;`context.item` 指当前变化项;`context.e` 表示事件参数。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。
`type SelectInputChangeContext = TagInputChangeContext`
\ No newline at end of file +tag-change | `(value: TagInputValue, context: SelectInputChangeContext)` | 值变化时触发,参数 `context.trigger` 表示数据变化的触发来源;`context.index` 指当前变化项的下标;`context.item` 指当前变化项;`context.e` 表示事件参数。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。
`type SelectInputChangeContext = TagInputChangeContext`
diff --git a/src/select-input/type.ts b/src/select-input/type.ts index 9cf64937b4..758b12781c 100644 --- a/src/select-input/type.ts +++ b/src/select-input/type.ts @@ -112,7 +112,6 @@ export interface TdSelectInputProps { prefixIcon?: TNode; /** * 只读状态,值为真会隐藏输入框,且无法打开下拉框 - * @default false */ readonly?: boolean; /** diff --git a/src/select-input/useMultiple.tsx b/src/select-input/useMultiple.tsx index 45bc18ecce..f747adf4fa 100644 --- a/src/select-input/useMultiple.tsx +++ b/src/select-input/useMultiple.tsx @@ -7,6 +7,7 @@ import Loading from '../loading'; import useDefault from '../hooks/useDefaultValue'; import { usePrefixClass } from '../hooks/useConfig'; import { useDisabled } from '../hooks/useDisabled'; +import { useReadonly } from '../hooks/useReadonly'; import { PopupInstanceFunctions } from '../popup'; export interface RenderSelectMultipleParams { @@ -38,6 +39,7 @@ export default function useMultiple( 'inputValue', ); const disable = useDisabled(); + const isReadonly = useReadonly(); const iKeys = computed(() => ({ ...DEFAULT_KEYS, ...props.keys })); const tags = computed(() => { @@ -93,7 +95,7 @@ export default function useMultiple( tagProps: props.tagProps, label: props.label, autoWidth: props.autoWidth, - readonly: props.readonly, + readonly: isReadonly.value, placeholder: tPlaceholder.value, minCollapsedNum: props.minCollapsedNum, collapsedItems: props.collapsedItems, @@ -102,7 +104,7 @@ export default function useMultiple( valueDisplay: props.valueDisplay, inputValue: p.popupVisible && p.allowInput ? tInputValue.value : '', inputProps: { - readonly: !props.allowInput || props.readonly, + readonly: !props.allowInput || isReadonly.value, inputClass: { [`${classPrefix.value}-input--focused`]: p.popupVisible, }, diff --git a/src/select-input/useOverlayInnerStyle.ts b/src/select-input/useOverlayInnerStyle.ts index c7a6bebb42..8226164b04 100644 --- a/src/select-input/useOverlayInnerStyle.ts +++ b/src/select-input/useOverlayInnerStyle.ts @@ -4,6 +4,7 @@ import isFunction from 'lodash/isFunction'; import { TdSelectInputProps } from './type'; import { TdPopupProps, PopupVisibleChangeContext } from '../popup'; import { useDisabled } from '../hooks/useDisabled'; +import { useReadonly } from '../hooks/useReadonly'; export type overlayInnerStyleProps = Pick< TdSelectInputProps, @@ -19,6 +20,7 @@ export default function useOverlayInnerStyle(props: overlayInnerStyleProps) { const { popupProps, autoWidth } = toRefs(props); const innerPopupVisible = ref(false); const disable = useDisabled(); + const isReadonly = useReadonly(); const matchWidthFunc = (triggerElement: HTMLElement, popupElement: HTMLElement) => { const SCROLLBAR_WIDTH = popupElement.scrollHeight > popupElement.offsetHeight ? RESERVE_WIDTH : 0; @@ -41,7 +43,7 @@ export default function useOverlayInnerStyle(props: overlayInnerStyleProps) { }; const onInnerPopupVisibleChange = (visible: boolean, ctx: PopupVisibleChangeContext) => { - if (disable.value || props.readonly) return; + if (disable.value || isReadonly.value) return; // 如果点击触发元素(输入框)且为可输入状态,则继续显示下拉框 const newVisible = ctx.trigger === 'trigger-element-click' && props.allowInput ? true : visible; // 重复点击触发元素时,下拉框展示状态不变,不重复触发事件 diff --git a/src/select-input/useSingle.tsx b/src/select-input/useSingle.tsx index 2726bea20b..9c4d333b30 100644 --- a/src/select-input/useSingle.tsx +++ b/src/select-input/useSingle.tsx @@ -7,6 +7,7 @@ import { useTNodeJSX } from '../hooks/tnode'; import { usePrefixClass } from '../hooks/useConfig'; import useDefaultValue from '../hooks/useDefaultValue'; import { useDisabled } from '../hooks/useDisabled'; +import { useReadonly } from '../hooks/useReadonly'; import { PopupInstanceFunctions } from '../popup'; import { TdSelectInputProps } from './type'; import { SelectInputCommonProperties } from './interface'; @@ -62,10 +63,12 @@ export default function useSingle( ); const renderTNode = useTNodeJSX(); const disable = useDisabled(); + const isReadonly = useReadonly(); const commonInputProps = computed(() => ({ ...pick(props, COMMON_PROPERTIES), disabled: disable.value, + readonly: isReadonly.value, })); const onInnerClear = (context: { e: MouseEvent }) => { @@ -89,11 +92,11 @@ export default function useSingle( value: renderInputDisplay(singleValueDisplay, displayedValue, popupVisible), label: prefixContent.length ? () => prefixContent : undefined, autoWidth: props.autoWidth, - readonly: !props.allowInput || props.readonly, + readonly: !props.allowInput || isReadonly.value, placeholder: renderPlaceholder(singleValueDisplay), suffixIcon: !disable.value && props.loading ? () => : props.suffixIcon, showClearIconOnEmpty: Boolean( - props.clearable && (inputValue.value || displayedValue) && !disable.value && !props.readonly, + props.clearable && (inputValue.value || displayedValue) && !disable.value && !isReadonly.value, ), ...props.inputProps, };