feat(search): 增加clearTrigger属性 (#1726)

* feat(Search): 增加clearTrigger属性 * chore: update common --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tencent · Jan 22, 2025 · e3d5b79 · e3d5b79
1 parent 825fe6e
commit e3d5b79
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 2 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/search/props.ts b/src/search/props.ts
@@ -19,6 +19,15 @@ export default {
   },
   /** 是否居中 */
   center: Boolean,
+  /** 清空图标触发方式，仅在输入框有值时有效 */
+  clearTrigger: {
+    type: String as PropType<TdSearchProps['clearTrigger']>,
+    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
@@ -1,13 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Search Props
 
 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<AutocompleteOption>` `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
@@ -1,13 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Search Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 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<AutocompleteOption>` `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
@@ -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 (
             <div class={`${searchClass.value}__clear`} onClick={handleClear}>
               <TIconClear size="24" />

diff --git 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
+23 −22		style/mobile/theme/_dark.less
+6 −0		style/mobile/theme/_index.less
+161 −0		style/mobile/theme/_light.less
+8 −0		style/mobile/theme/_radius.less
+9 −0		style/mobile/theme/_spacer.less