feat(search): 增加type/clearTrigger属性

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,
@@ -65,6 +74,15 @@ export default {
       return ['square', 'round'].includes(val);
     },
   },
+  /** 输入框类型 */
+  type: {
+    type: String as PropType<TdSearchProps['type']>,
+    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,

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
@@ -18,6 +20,7 @@ placeholder | String | '' | \- | N
 readonly | Boolean | undefined | \- | N
 resultList | Array | [] | Typescript：`Array<string>` | 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`<br/> | N

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
@@ -18,6 +20,7 @@ placeholder | String | '' | 占位符 | N
 readonly | Boolean | undefined | 只读状态 | N
 resultList | Array | [] | 预览结果列表。TS 类型：`Array<string>` | 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`<br/>点击搜索框右侧操作内容时触发 | N

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" />
@@ -183,7 +187,7 @@ export default defineComponent({
               <input
                 ref={inputRef}
                 value={searchValue.value}
-                type="search"
+                type={props.type}
                 class={inputClasses.value}
                 autofocus={props.focus}
                 placeholder={props.placeholder}

src/search/type.ts

@@ -21,6 +21,11 @@ export interface TdSearchProps {
    * @default false
    */
   center?: boolean;
+  /**
+   * 清空图标触发方式，仅在输入框有值时有效
+   * @default always
+   */
+  clearTrigger?: 'always' | 'focus';
   /**
    * 是否可清空
    * @default true
@@ -67,6 +72,11 @@ export interface TdSearchProps {
    * @default 'square'
    */
   shape?: 'square' | 'round';
+  /**
+   * 输入框类型
+   * @default search
+   */
+  type?: 'search' | 'text' | 'number' | 'url' | 'tel';
   /**
    * 值，搜索关键词
    * @default ''