Skip to content

InputSearch 搜索框

带搜索按钮的输入框,作为独立顶层组件存在(不挂在 Input 命名空间下)。

何时使用

  • 需要带搜索按钮的输入场景,配合 @search 事件触发查询。
  • 需要在按钮内显示加载状态(loading)。
  • 需要自定义按钮文字或完全自定义按钮内容(enter-button slot)。

基本使用

enterButton=false(默认)时右侧仅显示放大镜图标,点击放大镜或按 Enter 触发 @search

带搜索按钮

enterButton=true 显示放大镜按钮;enterButton="搜索" 显示文字按钮。

加载状态

loading=true 时按钮内的放大镜替换为旋转 loading 图标,按钮 disabled 且不触发 @search

自定义按钮内容

enter-button slot 完全自定义按钮内容(优先级高于 prop)。

清除按钮 + 搜索

clearable 开启后,清除会同时 emit @search('')

InputSearch 参数

参数类型默认说明
modelValuestring--绑定值(v-model)
defaultValuestring--非受控初值
placeholderstring--占位符
enterButtonbooleanstringVNode
loadingbooleanfalse搜索中状态,按钮变 disabled
size'large''default''small'
disabledbooleanfalse整体禁用
readonlybooleanfalse只读
clearablebooleanfalse清除按钮,清除时同步 emit @search('')
maxLengthnumber--最大长度
status'''error''warning'

InputSearch 事件

事件名参数说明
search(value, event?)点击 enterButton / 点击 suffix 放大镜 / Enter / clear 都触发;disabled/loading 时不触发
press-entereventEnter 时触发(与 search 共存)
update:modelValuevaluev-model
inputvalue输入时触发
changevalue失焦时触发
focusevent获得焦点
blurevent失去焦点
clear--点击清除按钮

InputSearch 插槽

插槽名说明
enter-button完全自定义按钮内容,优先级高于 enterButton
prefix输入框左侧前缀
suffix输入框右侧后缀(与放大镜共存)

Released under the MIT License.