Search 搜索框

搜索框内置搜索图标与清空按钮，支持圆角/方形样式、占位样式、前置插槽与搜索事件。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-search 的用法，可按需组合。

<template>
  <mu-search v-model="keyword" placeholder="搜索商品、订单"></mu-search>
</template>

圆角

控制是否为圆角样式，默认为圆角。

<mu-search v-model="roundValue" placeholder="圆形搜索框"></mu-search>
<mu-search v-model="squareValue" placeholder="方形搜索框" :round="false"></mu-search>

清空按钮

输入内容后显示清空图标，设置 clearable 为 false 可隐藏。

<mu-search v-model="clearValue" placeholder="带清空按钮"></mu-search>
<mu-search v-model="noClearValue" placeholder="不可清空" :clearable="false"></mu-search>

禁用

禁用后不响应输入与清空。

<mu-search v-model="disabledValue" placeholder="禁用的搜索框" :disabled="true"></mu-search>

最大长度

限制可输入的最大字符数。

<mu-search v-model="maxValue" placeholder="最多输入 5 个字" :maxlength="5"></mu-search>

输入类型

设置输入框的键盘类型，如 number 时弹出数字键盘。

<mu-search v-model="numValue" placeholder="数字键盘" type="number"></mu-search>

占位样式

通过行内样式自定义占位文字的颜色等样式。

<mu-search v-model="styleValue" placeholder="自定义占位样式"
  placeholder-style="color:var(--mu-color-primary);"></mu-search>

前置图标

使用 prefix 插槽替换默认的搜索图标。

<mu-search v-model="prefixValue" placeholder="自定义前置图标">
  <template #prefix>
    <mu-icon name="camera" :size="32" color="var(--mu-color-primary)"></mu-icon>
  </template>
</mu-search>

搜索与清空

点击键盘搜索按钮触发 search，点击清空图标触发 clear。

<mu-search v-model="eventValue" placeholder="回车触发搜索" @search="onSearch" @clear="onClear"></mu-search>

输入与失焦

输入时触发 input，失焦时触发 blur。

<mu-search v-model="evtValue" placeholder="输入或失焦触发" @input="onInput" @blur="onBlur"></mu-search>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

参考

官方内置组件的通用属性与事件请参考 uni-app x Input 组件。

属性名称	说明	类型	默认值
v-model	绑定值（搜索关键字）	string	-
placeholder	占位提示文字	string	搜索
placeholderStyle	占位文字样式	string	-
placeholderClass	占位文字类名	string	-
disabled	是否禁用	boolean	false
clearable	是否可清空（非空且未禁用时显示清空图标）	boolean	true
round	是否为圆角样式	boolean	true
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	any	-

事件

组件支持以下事件。

事件名	说明	回调参数
search	点击键盘搜索按钮（回车）时触发	value: string
change	失焦或清空时触发	value: string
clear	点击清空图标时触发	-

插槽

组件支持以下插槽。

名称	说明
prefix	自定义前置图标内容

方法

通过 ref 获取组件实例后调用以下方法。

方法名	说明	参数	返回值
focus	使输入框聚焦	-	-
blur	使输入框失焦	-	-

注意事项

• 平台差异：App、小程序、Web 表现一致。
• 使用注意：通过 v-model 绑定关键字（字符串），clearable 与 round 默认均为 true。
• 使用注意：回车/点击键盘搜索键触发 search，失焦触发 change，点击清空触发 clear。
• 使用注意：可通过 ref 调用 focus() / blur() 控制焦点，prefix 插槽用于替换默认搜索图标。