177 lines
4.3 KiB
Markdown
177 lines
4.3 KiB
Markdown
|
# SearchBox <small>搜索框</small>
|
||
|
|
|
||
|
|
## 示例
|
||
|
|
|
||
|
|
### 风格
|
||
|
|
|
||
|
|
可选的 `ui` 属性值：`strong`。
|
||
|
|
|
||
|
|
[[ demo src="/demo/search-box/style.vue" ]]
|
||
|
|
|
||
|
|
### 尺寸
|
||
|
|
|
||
|
|
可选的 `ui` 属性值：`xs`/`s`/`m`/`l`。
|
||
|
|
|
||
|
|
[[ demo src="/demo/search-box/size.vue" ]]
|
||
|
|
|
||
|
|
### 只读与禁用
|
||
|
|
|
||
|
|
[[ demo src="/demo/search-box/disabled.vue" ]]
|
||
|
|
|
||
|
|
### 推荐列表
|
||
|
|
|
||
|
|
[[ demo src="/demo/search-box/suggestion.vue" ]]
|
||
|
|
|
||
|
|
## API
|
||
|
|
|
||
|
|
### 属性
|
||
|
|
|
||
|
|
| 名称 | 类型 | 默认值 | 描述 |
|
||
|
|
| -- | -- | -- | -- |
|
||
|
|
| `ui` | `string=` | - | [^ui] |
|
||
|
|
| `placeholder` | `string` | - | 搜索框占位符。 |
|
||
|
|
| `value` | `string` | - | [^value] |
|
||
|
|
| `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` | 选择推荐项时是否自动使用其内容填充文本框。 |
|
||
|
|
| `suggest-trigger` | `Array<string>|string` | `input` | [^suggest-trigger] |
|
||
|
|
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
|
||
|
|
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
|
||
|
|
|
||
|
|
^^^ui
|
||
|
|
按钮预设样式。
|
||
|
|
|
||
|
|
+++枚举值
|
||
|
|
| 值 | 描述 |
|
||
|
|
| -- | -- |
|
||
|
|
| `strong` | 加强样式，搜索图标变成搜索按钮，背景为主题色。 |
|
||
|
|
| `xs` | 特小尺寸样式。 |
|
||
|
|
| `s` | 小尺寸样式。 |
|
||
|
|
| `m` | 中等尺寸样式。 |
|
||
|
|
| `l` | 大尺寸样式。 |
|
||
|
|
+++
|
||
|
|
^^^
|
||
|
|
|
||
|
|
^^^value
|
||
|
|
:::badges
|
||
|
|
`v-model`
|
||
|
|
:::
|
||
|
|
|
||
|
|
输入框的值。
|
||
|
|
^^^
|
||
|
|
|
||
|
|
^^^suggestions
|
||
|
|
推荐列表。列表项为 `Object` 时格式为 `{label, value}`。
|
||
|
|
|
||
|
|
+++字段详情
|
||
|
|
| 名称 | 类型 | 描述 |
|
||
|
|
| -- | -- | -- |
|
||
|
|
| `label` | `string` | 推荐项文本。 |
|
||
|
|
| `value` | `string` | 推荐项值。 |
|
||
|
|
+++
|
||
|
|
^^^
|
||
|
|
|
||
|
|
^^^suggest-trigger
|
||
|
|
展示推荐列表的触发时机。可以是枚举值，也可以枚举值的组合。
|
||
|
|
|
||
|
|
+++枚举值
|
||
|
|
| 值 | 描述 |
|
||
|
|
| -- | -- |
|
||
|
|
| `focus` | 输入框聚焦时。 |
|
||
|
|
| `input` | 输入框触发 `input` 事件时。 |
|
||
|
|
| `submit` | 点击搜索按钮时。 |
|
||
|
|
+++
|
||
|
|
^^^
|
||
|
|
|
||
|
|
### 插槽
|
||
|
|
|
||
|
|
| 名称 | 描述 |
|
||
|
|
| -- | -- |
|
||
|
|
| `suggestions` | [^slot-suggestions] |
|
||
|
|
| `suggestions-before` | 插入推荐列表前的内容。 |
|
||
|
|
| `suggestions-after` | 插入推荐列表后的内容。 |
|
||
|
|
| `suggestion` | [^slot-suggestion] |
|
||
|
|
|
||
|
|
^^^slot-suggestions
|
||
|
|
推荐列表内容。
|
||
|
|
|
||
|
|
+++作用域参数
|
||
|
|
| 名称 | 类型 | 描述 |
|
||
|
|
| -- | -- | -- |
|
||
|
|
| `suggestions` | `Array<{value: string, label: string}>` | 从 `suggestions` 属性归一化类型后的推荐列表。 |
|
||
|
|
| `select` | `function(suggestion: {value: string, label: string}): void` | 选择指定的推荐项。 |
|
||
|
|
|
||
|
|
^^^slot-suggestion
|
||
|
|
推荐列表的单项插槽，用来定制选项内容。
|
||
|
|
|
||
|
|
+++作用域参数
|
||
|
|
| 名称 | 类型 | 描述 |
|
||
|
|
| -- | -- | -- |
|
||
|
|
| `label` | `string` | 选项文本。 |
|
||
|
|
| `value` | `string` | 选项值。 |
|
||
|
|
|
||
|
|
`suggestions` 中的每一项，除了 `label` 和 `value` 外的字段也会自动通过 `v-bind` 进行绑定。
|
||
|
|
|
||
|
|
当 `suggestions` 为 `Array<string>` 类型时，`label` 和 `value` 均为单项 `string` 值。
|
||
|
|
+++
|
||
|
|
^^^
|
||
|
|
|
||
|
|
### 事件
|
||
|
|
|
||
|
|
| 名称 | 描述 |
|
||
|
|
| -- | -- |
|
||
|
|
| `input` | [^event-input] |
|
||
|
|
| `suggest` | [^event-suggest] |
|
||
|
|
| `select` | [^event-select] |
|
||
|
|
| `search` | [^event-search] |
|
||
|
|
|
||
|
|
^^^event-input
|
||
|
|
输入框中文本发生变化时触发该事件，回调参数为 `(value: string)`。
|
||
|
|
|
||
|
|
+++参数详情
|
||
|
|
| 名称 | 类型 | 描述 |
|
||
|
|
| -- | -- | -- |
|
||
|
|
| `value` | `string` | 输入框的值。 |
|
||
|
|
+++
|
||
|
|
^^^
|
||
|
|
|
||
|
|
^^^event-suggest
|
||
|
|
需要展示推荐列表时触发，回调参数为 `(value: string)`。
|
||
|
|
|
||
|
|
+++参数详情
|
||
|
|
| 名称 | 类型 | 描述 |
|
||
|
|
| -- | -- | -- |
|
||
|
|
| `value` | `string` | 输入框的值。 |
|
||
|
|
+++
|
||
|
|
^^^
|
||
|
|
|
||
|
|
^^^event-select
|
||
|
|
选择推荐列表某个选项时触发，回调参数为 `(item: Object)`。
|
||
|
|
|
||
|
|
+++参数详情
|
||
|
|
| 名称 | 类型 | 描述 |
|
||
|
|
| -- | -- | -- |
|
||
|
|
| `item` | `{label: string, value: string=, ...}` | 单个选项。 |
|
||
|
|
+++
|
||
|
|
^^^
|
||
|
|
|
||
|
|
^^^event-search
|
||
|
|
输入内容被提交时触发，回调参数为 `(value: string, event: Event)`。
|
||
|
|
|
||
|
|
+++参数详情
|
||
|
|
| 名称 | 类型 | 描述 |
|
||
|
|
| -- | -- | -- |
|
||
|
|
| `value` | `string` | 输入框的值。 |
|
||
|
|
| `event` | [`Event`](https://developer.mozilla.org/en-US/docs/Web/Events/click) | 原生点击事件。 |
|
||
|
|
+++
|
||
|
|
^^^
|
||
|
|
|
||
|
|
### 图标
|
||
|
|
|
||
|
|
| 名称 | 描述 |
|
||
|
|
| -- | -- |
|
||
|
|
| `search` | 搜索。 |
|