feat: add props for search-box

This commit is contained in:
Justineo 2022-05-07 00:14:11 +08:00 committed by GU Yiling
parent 682d3c28c6
commit 1f37be0095
4 changed files with 43 additions and 8 deletions

View File

@ -47,10 +47,10 @@
| ``clearable`` | `boolean=` | `false` | 是否显示清除按钮。 |
| ``composition`` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
| ``select-on-focus`` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
| ``get-length`` | `function(string): number=` | 自定义的字符长度计算函数。 |
| ``trim`` | `boolean | string=` | `false` | [^trim] |
| ``maxlength`` | `number=` | - | 最大可输入的字符长度。 |
| ``get-length`` | `function(string): number=` | 自定义的字符长度计算函数。 |
| ``strict`` | `boolean=` | `false` | 是否超出最大字符长度后不允许继续输入。 |
| ``trim`` | `boolean | string=` | `false` | [^trim] |
^^^ui
预设样式。

View File

@ -29,18 +29,22 @@
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``placeholder`` | `string` | - | 搜索框占位符。 |
| ``value`` | `string` | - | [^value] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``placeholder`` | `string` | - | 搜索框占位符。 |
| ``autofocus`` | `boolean` | `false` | 是否自动聚焦。 |
| ``clearable`` | `boolean` | `false` | 是否显示清除按钮。 |
| ``select-on-focus`` | `boolean` | `false` | 聚焦时是否自动选择文本。 |
| ``composition`` | `boolean` | `false` | 是否感知输入法状态。 |
| ``suggestions`` | `Array<string>|Array<Object>` | - | [^suggestions] |
| ``replace-on-select`` | `boolean` | `true` | 选择推荐项时是否自动使用其内容填充文本框。 |
| ``maxlength`` | `number=` | - | 最大可输入的字符长度。 |
| ``get-length`` | `function(string): number=` | 自定义的字符长度计算函数。 |
| ``strict`` | `boolean=` | `false` | 是否超出最大字符长度后不允许继续输入。 |
| ``trim`` | `boolean | string=` | `false` | [^trim] |
| ``suggest-trigger`` | `Array<string>|string` | `input` | [^suggest-trigger] |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
@ -97,6 +101,18 @@
建议面板是否展开(如果 `suggestions` 中没有待选项,则即使为 `true` 时面板也会关闭)。
^^^
^^^trim
是否移除前后空格。当为 `true` 时,会移除前后空格,当为 `false` 时,不移除前后空格。设置为字符串时,按指定方式进行移除。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `both` | 移除两端空格。等同于 `true` 时的行为。 |
| `start` | 移除开始空格。 |
| `end` | 移除末尾空格。 |
+++
^^^
### 插槽
| 名称 | 描述 |

View File

@ -35,7 +35,9 @@ Use the [`disabled`](#props-disabled) prop to set an input to disabled state.
| ``clearable`` | `boolean=` | `false` | Whether to show a clear button. |
| ``composition`` | `boolean=` | `false` | Whether the input process should be aware of composition. |
| ``select-on-focus`` | `boolean=` | `false` | Whether to select text content when focused. |
| ``maxlength`` | `number=` | - | The maximum length of characters that can be entered. |
| ``get-length`` | `function(string): number=` | Used to customize length calculation of the input. |
| ``strict`` | `boolean=` | `false` | Whether to disallow further input after reaching the maximum character length. |
| ``trim`` | `boolean | string=` | `false` | [^trim] |
^^^ui

View File

@ -29,18 +29,24 @@ Available size values for the [`ui`](#props-ui) prop: `xs` / `s` / `m` / `l`.
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``placeholder`` | `string` | - | The placeholder text of the search box. |
| ``value`` | `string` | - | [^value] |
| ``disabled`` | `boolean=` | `false` | Whether the search box is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the search box is read-only. |
| ``placeholder`` | `string` | - | The placeholder text of the search box. |
| ``autofocus`` | `boolean` | `false` | Whether the search box gains focus automatically. |
| ``clearable`` | `boolean` | `false` | Whether the clear button is displayed. |
| ``select-on-focus`` | `boolean` | `false` | Whether to select all content upon focus. |
| ``composition`` | `boolean` | `false` | Whether the search box triggers value change upon composition of IME. |
| ``suggestions`` | `Array<string>|Array<Object>` | - | [^suggestions] |
| ``replace-on-select`` | `boolean` | `true` | Whether to replace the content with suggestion item value when it's selected. |
| ``maxlength`` | `number=` | - | The maximum length of characters that can be entered. |
| ``get-length`` | `function(string): number=` | Used to customize length calculation of the input. |
| ``strict`` | `boolean=` | `false` | Whether to disallow further input after reaching the maximum character length. |
| ``trim`` | `boolean | string=` | `false` | [^trim] |
| ``suggest-trigger`` | `Array<string>|string` | `input` | [^suggest-trigger] |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | Whether the search box is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the search box is read-only. |
| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | Used to customize search highlighting logic. See [`Autocomplete`](./Autocomplete#customizing-search). |
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | Used to customize search hitting logic. See [`Autocomplete`](./Autocomplete#customizing-search). |
^^^ui
Style variants.
@ -96,6 +102,17 @@ Specifies when the suggestion list is displayed. Can be either an event name or
Whether the suggestion list is expanded (if there are no items in `suggestions`, the list won't be expanded even the value is `false`).
^^^
^^^trim
Wether to trim the input value. If set to `true`, the input value will be trimmed from both ends. If set to `false`, the input value will not be trimmed. If set to a string, the input value will be trimmed from the specified side.
+++Enum
| Value | Description |
| -- | -- |
| `both` | Trim from both ends. Equivalent to `true`. |
| `start` | Trim from the start. |
| `end` | Trim from the end. |
+++
### Slots
| Name | Description |