diff --git a/src/_common b/src/_common index fbdd16dad..ef7c8d3c5 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit fbdd16dadc40351cebe742e5ae83590e1622aff5 +Subproject commit ef7c8d3c5978476b26affe54abcb6fe5f5ad9e8b diff --git a/src/search/props.ts b/src/search/props.ts index d9dba579b..f901b303b 100644 --- a/src/search/props.ts +++ b/src/search/props.ts @@ -19,6 +19,15 @@ export default { }, /** 是否居中 */ center: Boolean, + /** 清空图标触发方式,仅在输入框有值时有效 */ + clearTrigger: { + type: String as PropType, + default: 'always' as TdSearchProps['clearTrigger'], + validator(val: TdSearchProps['clearTrigger']): boolean { + if (!val) return true; + return ['always', 'focus'].includes(val); + }, + }, /** 是否可清空 */ clearable: { type: Boolean, diff --git a/src/search/search.en-US.md b/src/search/search.en-US.md index b6ca7daf3..a23874713 100644 --- a/src/search/search.en-US.md +++ b/src/search/search.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Search Props name | type | default | description | required @@ -8,6 +9,7 @@ name | type | default | description | required action | String / Slot / Function | '' | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N autocompleteOptions | Array | - | autocomplete words list。Typescript:`Array` `type AutocompleteOption = string \| { label: string \| TNode; group?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/search/type.ts) | N center | Boolean | false | \- | N +clearTrigger | String | always | show clear icon, clicked to clear input value。options: always / focus | N clearable | Boolean | true | \- | N disabled | Boolean | - | \- | N focus | Boolean | false | \- | N diff --git a/src/search/search.md b/src/search/search.md index 19b706666..eec3fb995 100644 --- a/src/search/search.md +++ b/src/search/search.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Search Props 名称 | 类型 | 默认值 | 描述 | 必传 @@ -8,6 +9,7 @@ action | String / Slot / Function | '' | 自定义右侧操作按钮文字,如:“取消”。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N autocompleteOptions | Array | - | 【讨论中】联想词列表,如果不存在或长度为 0 则不显示联想框。可以使用函数 `label` 自定义联想词为任意内容;也可使用插槽 `option` 定义联想词内容,插槽参数为 `{ option: AutocompleteOption; index: number }`。如果 `group` 值为 `true` 则表示当前项为分组标题。TS 类型:`Array` `type AutocompleteOption = string \| { label: string \| TNode; group?: boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/search/type.ts) | N center | Boolean | false | 是否居中 | N +clearTrigger | String | always | 清空图标触发方式,仅在输入框有值时有效。可选项:always / focus | N clearable | Boolean | true | 是否可清空 | N disabled | Boolean | - | 禁用状态 | N focus | Boolean | false | 是否聚焦 | N diff --git a/src/search/search.tsx b/src/search/search.tsx index 8f6044dce..897608f73 100644 --- a/src/search/search.tsx +++ b/src/search/search.tsx @@ -118,7 +118,11 @@ export default defineComponent({ return renderTNodeJSX('leftIcon'); }; const readerClear = () => { - if (props.clearable && searchValue.value) { + if ( + props.clearable && + searchValue.value && + (props.clearTrigger === 'always' || (props.clearTrigger === 'focus' && focused.value)) + ) { return (
diff --git a/src/search/type.ts b/src/search/type.ts index 08334196c..851a54011 100644 --- a/src/search/type.ts +++ b/src/search/type.ts @@ -21,6 +21,11 @@ export interface TdSearchProps { * @default false */ center?: boolean; + /** + * 清空图标触发方式,仅在输入框有值时有效 + * @default always + */ + clearTrigger?: 'always' | 'focus'; /** * 是否可清空 * @default true