From 3e1a9f79c4c315ae6365a319334357a8ebc997bf Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Wed, 15 Jan 2025 23:59:29 +0800 Subject: [PATCH] =?UTF-8?q?feat(search):=20=E5=A2=9E=E5=8A=A0type/clearTri?= =?UTF-8?q?gger=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/search/props.ts | 18 ++++++++++++++++++ src/search/search.en-US.md | 3 +++ src/search/search.md | 3 +++ src/search/search.tsx | 8 ++++++-- src/search/type.ts | 10 ++++++++++ 5 files changed, 40 insertions(+), 2 deletions(-) diff --git a/src/search/props.ts b/src/search/props.ts index d9dba579b..53e9fe934 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, @@ -65,6 +74,15 @@ export default { return ['square', 'round'].includes(val); }, }, + /** 输入框类型 */ + type: { + type: String as PropType, + default: 'search' as TdSearchProps['type'], + validator(val: TdSearchProps['type']): boolean { + if (!val) return true; + return ['search', 'text', 'number', 'url', 'tel'].includes(val); + }, + }, /** 值，搜索关键词 */ value: { type: String, diff --git a/src/search/search.en-US.md b/src/search/search.en-US.md index b6ca7daf3..8e8393ec4 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 @@ -18,6 +20,7 @@ placeholder | String | '' | \- | N readonly | Boolean | undefined | \- | N resultList | Array | [] | Typescript：`Array` | N shape | String | 'square' | options: square/round | N +type | String | search | options: search/text/number/url/tel | N value | String | - | `v-model` and `v-model:value` is supported | N defaultValue | String | - | uncontrolled property | N onActionClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N diff --git a/src/search/search.md b/src/search/search.md index 19b706666..c921b304c 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 @@ -18,6 +20,7 @@ placeholder | String | '' | 占位符 | N readonly | Boolean | undefined | 只读状态 | N resultList | Array | [] | 预览结果列表。TS 类型：`Array` | N shape | String | 'square' | 搜索框形状。可选项：square/round | N +type | String | search | 输入框类型。可选项：search/text/number/url/tel | N value | String | - | 值，搜索关键词。支持语法糖 `v-model` 或 `v-model:value` | N defaultValue | String | - | 值，搜索关键词。非受控属性 | N onActionClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击搜索框右侧操作内容时触发 | N diff --git a/src/search/search.tsx b/src/search/search.tsx index 8f6044dce..b9d45a63b 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 (
@@ -183,7 +187,7 @@ export default defineComponent({