SearchBar 搜索栏，主要用于内容搜索，跳转展示等。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

基础使用

点击组件搜索按钮或键盘搜索按钮触发 search 事件，返回输入框值。

<wui-search-bar @search="search"></wui-search-bar>

 const search = e => {
    //输入框值
    console.log(e.detail.value);
    Toast(`搜索关键词:${e.detail.value}`);
    //搜索逻辑自行处理
    //...
  };

调整样式

通过 background 属性设置搜索栏背景色，radius 属性设置搜索框圆角值，searchColor 属性设置搜索按钮字体颜色。

<wui-search-bar background="#ededed" radius="36" searchColor="#FFB703"></wui-search-bar>

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
background	String	搜索栏背景色	#F1F4FA	非Nvue端默认值为空，可通过css变量（--wui-bg-color-grey）改变颜色
paddingTb	Number, String	搜索栏上下padding值，单位rpx	16	-
paddingLr	Number, String	搜索栏左右padding值，单位rpx	24	-
height	Number, String	搜索框高度，单位rpx	72	-
radius	Number, String	搜索框圆角值，单位rpx	8	-
color	String	搜索框字体颜色	#181818	非Nvue端默认值为空，可通过css变量（--wui-color-title）改变颜色
inputBackground	String	搜索框背景颜色	#fff	-
focus	Boolean	获取焦点	false	支付宝小程序iOS系统10.1.80 及以上不支持，可将isShow设为true
placeholder	String	待输入状态描述文字	请输入搜索关键词	-
isLeft	Boolean	待输入状态占位内容是否左对齐	false	-
value	String	输入框初始默认值	-	-
disabled	Boolean	是否禁用输入框，禁用后只可触发click事件	false	-
cancel	Boolean	聚焦状态是否显示取消按钮	true	-
cancelText	String	取消按钮文本	取消	-
cancelColor	String	取消按钮文本颜色	#7F7F7F	-
searchText	String	搜索按钮文本	搜索	-
searchColor	String	搜索按钮文本颜色	#465CFF	非Nvue端默认值为空，可通过css变量（--wui-color-primary）改变颜色
showInput	Boolean	是否显示搜索输入框	true	-
showLabel	Boolean	是否显示输入框占位标签，当平台不支持focus属性时可隐藏	true	-

Events

事件名	说明	回调参数
@clear	点击清除按钮时触发	-
@focus	搜索框获取焦点时触发	event.detail = { value }
@blur	搜索框失去焦点时触发	event.detail = { value }
@click	点击搜索框时触发	-
@cancel	点击取消按钮时触发	-
@input	搜索框输入时触发	event.detail = { value }
@search	点击搜索按钮时触发	event.detail = { value }

Methods

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。

方法名	说明	传入参数	返回参数
reset	重置搜索栏，恢复初始状态	-	-