diff --git a/packages/search/README.md b/packages/search/README.md index 2c52cb47..bb3e0b8f 100644 --- a/packages/search/README.md +++ b/packages/search/README.md @@ -111,50 +111,51 @@ Page({ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| name | 在表单内提交时的标识符 | _string_ | - | - | -| label | 搜索框左侧文本 | _string_ | - | - | -| shape | 形状,可选值为 `round` | _string_ | `square` | - | -| value | 当前输入的值 | _string \| number_ | - | - | -| background | 搜索框背景色 | _string_ | `#f2f2f2` | - | -| show-action | 是否在搜索框右侧显示取消按钮 | _boolean_ | `false` | - | -| action-text | 取消按钮文字 | _boolean_ | `取消` | 1.0.0 | -| focus | 获取焦点 | _boolean_ | `false` | - | -| error | 是否将输入内容标红 | _boolean_ | `false` | - | -| disabled | 是否禁用输入框 | _boolean_ | `false` | - | -| readonly | 是否只读 | _boolean_ | `false` | - | -| clearable | 是否启用清除控件 | _boolean_ | `true` | - | -| maxlength | 最大输入长度,设置为 -1 的时候不限制最大长度 | _number_ | `-1` | - | -| use-action-slot | 是否使用 action slot | _boolean_ | `false` | - | -| placeholder | 输入框为空时占位符 | _string_ | - | - | -| placeholder-style | 指定占位符的样式 | _string_ | - | - | -| input-align | 输入框内容对齐方式,可选值为 `center` `right` | _string_ | `left` | - | -| use-left-icon-slot | 是否使用输入框左侧图标 slot | _boolean_ | `false` | - | -| use-right-icon-slot | 是否使用输入框右侧图标 slot | _boolean_ | `false` | - | -| left-icon | 输入框左侧图标名称或图片链接,可选值见 Icon 组件(如果设置了 use-left-icon-slot,则该属性无效) | _string_ | `search` | - | -| right-icon | 输入框右侧图标名称或图片链接,可选值见 Icon 组件(如果设置了 use-right-icon-slot,则该属性无效) | _string_ | - | - | -| clear-icon `v1.8.4` | 清除[图标名称](#/icon)或图片链接 | _string_ | `clear` | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------------- | ------------------------------------------------------------------------------------------------- | ------------------ | --- | +| name | 在表单内提交时的标识符 | _string_ | - | +| label | 搜索框左侧文本 | _string_ | - | +| shape | 形状,可选值为 `round` | _string_ | `square` | +| value | 当前输入的值 | _string \| number_ | - | +| background | 搜索框背景色 | _string_ | `#f2f2f2` | +| show-action | 是否在搜索框右侧显示取消按钮 | _boolean_ | `false` | +| action-text `v1.0.0` | 取消按钮文字 | _boolean_ | `取消` | +| focus | 获取焦点 | _boolean_ | `false` | +| error | 是否将输入内容标红 | _boolean_ | `false` | +| disabled | 是否禁用输入框 | _boolean_ | `false` | +| readonly | 是否只读 | _boolean_ | `false` | +| clearable | 是否启用清除控件 | _boolean_ | `true` | +| clear-trigger `v1.8.4` | 显示清除图标的时机,`always` 表示输入框不为空时展示,
`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` | +| clear-icon `v1.8.4` | 清除[图标名称](#/icon)或图片链接 | _string_ | `clear` | +| maxlength | 最大输入长度,设置为 -1 的时候不限制最大长度 | _number_ | `-1` | +| use-action-slot | 是否使用 action slot | _boolean_ | `false` | +| placeholder | 输入框为空时占位符 | _string_ | - | +| placeholder-style | 指定占位符的样式 | _string_ | - | +| input-align | 输入框内容对齐方式,可选值为 `center` `right` | _string_ | `left` | +| use-left-icon-slot | 是否使用输入框左侧图标 slot | _boolean_ | `false` | +| use-right-icon-slot | 是否使用输入框右侧图标 slot | _boolean_ | `false` | +| left-icon | 输入框左侧图标名称或图片链接,可选值见 Icon 组件(如果设置了 use-left-icon-slot,则该属性无效) | _string_ | `search` | +| right-icon | 输入框右侧图标名称或图片链接,可选值见 Icon 组件(如果设置了 use-right-icon-slot,则该属性无效) | _string_ | - | ### Events -| 事件名 | 说明 | 参数 | -| ----------- | ------------------ | ------------------------ | -| bind:search | 确定搜索时触发 | event.detail: 当前输入值 | -| bind:change | 输入内容变化时触发 | event.detail: 当前输入值 | -| bind:cancel | 取消搜索搜索时触发 | - | -| bind:focus | 输入框聚焦时触发 | - | -| bind:blur | 输入框失焦时触发 | - | -| bind:clear | 点击清空控件时触发 | - | -| bind:click-input | 点击搜索区域时触发 | - | +| 事件名 | 说明 | 参数 | +| ---------------- | ------------------ | ------------------------ | +| bind:search | 确定搜索时触发 | event.detail: 当前输入值 | +| bind:change | 输入内容变化时触发 | event.detail: 当前输入值 | +| bind:cancel | 取消搜索搜索时触发 | - | +| bind:focus | 输入框聚焦时触发 | - | +| bind:blur | 输入框失焦时触发 | - | +| bind:clear | 点击清空控件时触发 | - | +| bind:click-input | 点击搜索区域时触发 | - | ### Slot -| 名称 | 说明 | -| --- | --- | -| action | 自定义搜索框右侧按钮,需要在`use-action-slot`为 true 时才会显示 | -| label | 自定义搜索框左侧文本 | -| left-icon | 自定义输入框左侧图标,需要在`use-left-icon-slot`为 true 时才会显示 | +| 名称 | 说明 | +| ---------- | ------------------------------------------------------------------- | +| action | 自定义搜索框右侧按钮,需要在`use-action-slot`为 true 时才会显示 | +| label | 自定义搜索框左侧文本 | +| left-icon | 自定义输入框左侧图标,需要在`use-left-icon-slot`为 true 时才会显示 | | right-icon | 自定义输入框右侧图标,需要在`use-right-icon-slot`为 true 时才会显示 | ### 外部样式类 diff --git a/packages/search/index.ts b/packages/search/index.ts index cbbc720b..46a649d2 100644 --- a/packages/search/index.ts +++ b/packages/search/index.ts @@ -44,6 +44,10 @@ VantComponent({ type: Boolean, value: true, }, + clearTrigger: { + type: String, + value: 'focus', + }, clearIcon: { type: String, value: 'clear', diff --git a/packages/search/index.wxml b/packages/search/index.wxml index 13fabcc9..0068cfe7 100644 --- a/packages/search/index.wxml +++ b/packages/search/index.wxml @@ -21,6 +21,7 @@ disabled="{{ disabled }}" readonly="{{ readonly }}" clearable="{{ clearable }}" + clear-trigger="{{ clearTrigger }}" clear-icon="{{ clearIcon }}" maxlength="{{ maxlength }}" input-align="{{ inputAlign }}"