InputSearch 搜索框
带搜索按钮的输入框,作为独立顶层组件存在(不挂在 Input 命名空间下)。
何时使用
- 需要带搜索按钮的输入场景,配合
@search事件触发查询。 - 需要在按钮内显示加载状态(
loading)。 - 需要自定义按钮文字或完全自定义按钮内容(
enter-buttonslot)。
基本使用
enterButton=false(默认)时右侧仅显示放大镜图标,点击放大镜或按 Enter 触发 @search。
带搜索按钮
enterButton=true 显示放大镜按钮;enterButton="搜索" 显示文字按钮。
加载状态
loading=true 时按钮内的放大镜替换为旋转 loading 图标,按钮 disabled 且不触发 @search。
自定义按钮内容
enter-button slot 完全自定义按钮内容(优先级高于 prop)。
清除按钮 + 搜索
clearable 开启后,清除会同时 emit @search('')。
InputSearch 参数
| 参数 | 类型 | 默认 | 说明 |
|---|---|---|---|
| modelValue | string | -- | 绑定值(v-model) |
| defaultValue | string | -- | 非受控初值 |
| placeholder | string | -- | 占位符 |
| enterButton | boolean | string | VNode |
| loading | boolean | false | 搜索中状态,按钮变 disabled |
| size | 'large' | 'default' | 'small' |
| disabled | boolean | false | 整体禁用 |
| readonly | boolean | false | 只读 |
| clearable | boolean | false | 清除按钮,清除时同步 emit @search('') |
| maxLength | number | -- | 最大长度 |
| status | '' | 'error' | 'warning' |
InputSearch 事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| search | (value, event?) | 点击 enterButton / 点击 suffix 放大镜 / Enter / clear 都触发;disabled/loading 时不触发 |
| press-enter | event | Enter 时触发(与 search 共存) |
| update:modelValue | value | v-model |
| input | value | 输入时触发 |
| change | value | 失焦时触发 |
| focus | event | 获得焦点 |
| blur | event | 失去焦点 |
| clear | -- | 点击清除按钮 |
InputSearch 插槽
| 插槽名 | 说明 |
|---|---|
| enter-button | 完全自定义按钮内容,优先级高于 enterButton |
| prefix | 输入框左侧前缀 |
| suffix | 输入框右侧后缀(与放大镜共存) |