SearchBar 搜索栏

概述

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

支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiSearchBar from "@/components/firstui/fui-search-bar/fui-search-bar.vue"
export default {
	components:{
		fuiSearchBar
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

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

基础使用

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

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

search(e) {
	//输入框值
	console.log(e.detail.value)
	//搜索逻辑自行处理
	//...
}

调整样式

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

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

Slots

插槽名称	说明
default V1.9.8+	组件左侧自定义内容

Props

属性名	类型	说明	默认值	平台差异说明
background	String	搜索栏背景色	#F1F4FA	非Nvue端默认值为空，可通过css变量（--fui-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变量（--fui-color-title）改变颜色
inputBackground	String	搜索框背景颜色	#fff	-
focus	Boolean	获取焦点	false	支付宝小程序iOS系统10.1.80 及以上不支持，可将showLabel设为false
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变量（--fui-color-primary）改变颜色
showInput	Boolean	是否显示搜索输入框	true	-
showLabel	Boolean	是否显示输入框占位标签，当平台不支持focus属性时可隐藏	true	-
fixed V2.1.0+	Boolean	组件是否在弹层等fixed元素中使用，如果是则设为true	false	仅微信小程序支持，解决placeholder可能无法覆盖问题

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 V1.9.5+	重置搜索栏，恢复初始状态	-	-

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)