feat(Search): add formatter、format-trigger prop (#8441)

src/field/README.md

@@ -253,7 +253,7 @@ Use `input-align` prop to align the input value.
 | is-link | Whether to show link icon | _boolean_ | `false` |
 | autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |
 | show-word-limit | Whether to show word limit, need to set the `maxlength` prop | _boolean_ | `false` |
-| error | Whether to show error info | _boolean_ | `false` |
+| error | Whether to mark the input content in red | _boolean_ | `false` |
 | error-message | Error message | _string_ | - |
 | formatter | Input value formatter | _(val: string) => string_ | - |
 | format-trigger | When to format value，can be set to `onBlur` | _string_ | `onChange` |

src/search/README.md

@@ -127,7 +127,9 @@ Use `action` slot to custom right button, `cancel` event will no longer be Emitt
 | action-text | Text of action button | _boolean_ | `Cancel` |
 | disabled | Whether to disable field | _boolean_ | `false` |
 | readonly | Whether to be readonly | _boolean_ | `false` |
-| error | Whether to show error info | _boolean_ | `false` |
+| error | Whether to mark the input content in red | _boolean_ | `false` |
+| formatter `v3.0.12` | Input value formatter | _(val: string) => string_ | - |
+| format-trigger `v3.0.12` | When to format value，can be set to `onBlur` | _string_ | `onChange` |
 | input-align | Text align of field, can be set to `center` `right` | _string_ | `left` |
 | left-icon | Left icon name | _string_ | `search` |
 | right-icon | Right icon name | _string_ | - |

src/search/README.zh-CN.md

@@ -144,6 +144,8 @@ export default {
 | disabled | 是否禁用输入框 | _boolean_ | `false` |
 | readonly | 是否将输入框设为只读状态，只读状态下无法输入内容 | _boolean_ | `false` |
 | error | 是否将输入内容标红 | _boolean_ | `false` |
+| formatter `v3.0.12` | 输入内容格式化函数 | _(val: string) => string_ | - |
+| format-trigger `v3.0.12` | 格式化函数触发的时机，可选值为 `onBlur` | _string_ | `onChange` |
 | input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` |
 | left-icon | 输入框左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `search` |
 | right-icon | 输入框右侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |

src/search/Search.tsx

@@ -15,7 +15,7 @@ import { useExpose } from '../composables/use-expose';
 import { Field } from '../field';
 
 // Types
-import type { FieldClearTrigger } from '../field/types';
+import type { FieldClearTrigger, FieldFormatTrigger } from '../field/types';
 
 const [name, bem, t] = createNamespace('search');
 
@@ -30,11 +30,13 @@ export default defineComponent({
     label: String,
     clearIcon: String,
     rightIcon: String,
+    formatter: Function as PropType<(value: string) => string>,
     modelValue: String,
     actionText: String,
     background: String,
     showAction: Boolean,
     clearTrigger: String as PropType<FieldClearTrigger>,
+    formatTrigger: String as PropType<FieldFormatTrigger>,
     shape: {
       type: String as PropType<SearchShape>,
       default: 'square',
@@ -100,10 +102,13 @@ export default defineComponent({
 
     const fieldPropNames = [
       'leftIcon',
+      'clearIcon',
       'rightIcon',
+      'formatter',
       'clearable',
       'modelValue',
       'clearTrigger',
+      'formatTrigger',
     ] as const;
 
     const renderField = () => {
@@ -122,7 +127,6 @@ export default defineComponent({
           ref={filedRef}
           type="search"
           border={false}
-          clearIcon={props.clearIcon}
           onKeypress={onKeypress}
           {...fieldAttrs}
           {...{ 'onUpdate:modelValue': onInput }}