feat(Search): add clear-trigger prop (#6700)

src/search/README.md

@@ -88,7 +88,7 @@ export default {
 
 ### Custom Action Button
 
-Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot
+Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot.
 
 ```html
 <van-search
@@ -116,6 +116,7 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
 | maxlength | Max length of value | _number \| string_ | - |
 | placeholder | Placeholder | _string_ | - |
 | clearable | Whether to be clearable | _boolean_ | `true` |
+| clear-trigger `v2.9.1` | When to display the clear icon, `always` means to display the icon when value is not empty, `focus` means to display the icon when input is focused | _string_ | `focus` |
 | autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |
 | show-action | Whether to show right action button | _boolean_ | `false` |
 | action-text `v2.2.2` | Text of action button | _boolean_ | `Cancel` |

src/search/README.zh-CN.md

@@ -13,7 +13,7 @@ Vue.use(Search);
 
 ### 基础用法
 
-v-model 用于控制搜索框中的文字，background 可以自定义搜索框外部背景色
+v-model 用于控制搜索框中的文字，background 可以自定义搜索框外部背景色。
 
 ```html
 <van-search v-model="value" placeholder="请输入搜索关键词" />
@@ -21,7 +21,7 @@ v-model 用于控制搜索框中的文字，background 可以自定义搜索框
 
 ### 事件监听
 
-Search 组件提供了`search`和`cancel`事件，`search`事件在点击键盘上的搜索/回车按钮后触发，`cancel`事件在点击搜索框右侧取消按钮时触发
+Search 组件提供了 `search` 和 `cancel` 事件，`search` 事件在点击键盘上的搜索/回车按钮后触发，`cancel` 事件在点击搜索框右侧取消按钮时触发。
 
 ```html
 <form action="/">
@@ -55,11 +55,11 @@ export default {
 };
 ```
 
-> Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮
+> Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮。
 
 ### 搜索框内容对齐
 
-通过 `input-align` 属性设置搜索框内容的对齐方式，可选值为`center`、`right`
+通过 `input-align` 属性设置搜索框内容的对齐方式，可选值为 `center`、`right`。
 
 ```html
 <van-search
@@ -71,7 +71,7 @@ export default {
 
 ### 禁用搜索框
 
-通过`disabled`属性禁用搜索框
+通过 `disabled` 属性禁用搜索框。
 
 ```html
 <van-search v-model="value" disabled placeholder="请输入搜索关键词" />
@@ -79,7 +79,7 @@ export default {
 
 ### 自定义背景色
 
-通过`background`属性可以设置搜索框外部的背景色，通过`shape`属性设置搜索框的形状，可选值为`round`
+通过 `background` 属性可以设置搜索框外部的背景色，通过 `shape` 属性设置搜索框的形状，可选值为 `round`。
 
 ```html
 <van-search
@@ -92,7 +92,7 @@ export default {
 
 ### 自定义按钮
 
-使用`action`插槽可以自定义右侧按钮的内容。使用插槽后，`cancel`事件将不再触发
+使用 `action` 插槽可以自定义右侧按钮的内容。使用插槽后，`cancel` 事件将不再触发。
 
 ```html
 <van-search
@@ -119,7 +119,8 @@ export default {
 | background | 搜索框外部背景色 | _string_ | `#f2f2f2` |
 | maxlength | 输入的最大字符数 | _number \| string_ | - |
 | placeholder | 占位提示文字 | _string_ | - |
-| clearable | 是否启用清除控件 | _boolean_ | `true` |
+| clearable | 是否启用清除图标，点击清除图标后会清空输入框 | _boolean_ | `true` |
+| clear-trigger `v2.9.1` | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
 | autofocus | 是否自动聚焦，iOS 系统不支持该属性 | _boolean_ | `false` |
 | show-action | 是否在搜索框右侧显示取消按钮 | _boolean_ | `false` |
 | action-text `v2.2.2` | 取消按钮文字 | _boolean_ | `取消` |

src/search/index.tsx

@@ -22,6 +22,7 @@ export type SearchProps = {
   background: string;
   actionText?: string;
   showAction?: boolean;
+  clearTrigger?: string;
 };
 
 export type SearchSlots = DefaultSlots & {
@@ -110,6 +111,7 @@ function Search(
           leftIcon={props.leftIcon}
           rightIcon={props.rightIcon}
           clearable={props.clearable}
+          clearTrigger={props.clearTrigger}
           scopedSlots={{
             'left-icon': slots['left-icon'],
             'right-icon': slots['right-icon'],
@@ -127,8 +129,9 @@ Search.props = {
   label: String,
   rightIcon: String,
   actionText: String,
-  showAction: Boolean,
   background: String,
+  showAction: Boolean,
+  clearTrigger: String,
   shape: {
     type: String,
     default: 'square',