Search 组件

介绍

通用业务搜索栏组件，常用于页面的顶部搜索，也可以与导航栏组合使用.

用法

基本引入

import { FQSearch } from '@fq/fq-weapp-ui-pro';

组件依赖的样式文件（仅按需引用时需要）

import '@fq/fq-weapp-ui-pro/dist/styles/components/search.scss';

基础用法

<FQSearch size='default' placeholder='请输入' ref={inputRef} onInput={handleInput} onSearch={handleSearch} onConfirm={handleConfirm} />

小号搜索框

<FQSearch size='small' placeholder='请输入内容' />

固定宽度

<FQSearch style={{ margin: '0 auto' }} width={440} size='small' placeholder='请输入' />

受控组件

<FQSearch value={currentValue} onInput={setCurrentValue} onSearch={setCurrentValue}  placeholder='请输入' />

带图标组合使用

<FQSearch size='small' placeholder='请输入' />

搜索按钮颜色

<FQSearch enterButtonType='primary' placeholder='请输入' />

不带搜索按钮和清除按钮

<FQSearch showSearchButton={false} allowClear={false} placeholder='请输入' />

禁用

<FQSearch disabled placeholder='请输入' />

API

属性

参数名	类型	默认值	说明
value	string	-	当前值
ref	Ref<HTMLInputElement>	-	当前input的ref实例
size	SizeType	'default'	搜索栏大小 ['default', 'small']，如果有width，height，则失效
width	`string	number`	'default'
height	`string	number`	'default'
onSearch	(value: string) => void	-	搜索回调
onInput	(value: string) => void	-	输入回调
onConfirm	(value: string) => void	-	回车/键盘搜索后的回调
showSearchButton	boolean	true	是否展示右侧搜索按钮
autoFocus	boolean	false	自动聚焦
allowClear	boolean	true	展示清除按钮
loading	boolean	false	加载中状态
confirmText	string	'搜索'	搜索按钮文本
disabled	boolean	false	禁用
bordered	boolean	true	边框
enterButton	React.ReactNode	-	搜索按钮
enterButtonType	string	'default'	搜索按钮类型 'default'
defaultPrefixCls	string	-	默认前缀类名
focusPrefixCls	string	-	焦点前缀类名
placeholder	string	-	占位符
searchButtonText	string	-	搜索按钮文案
addonBeforeIcon	React.ReactNode	-	展示左侧放大镜搜索图标
inputProps	Object	{}	Input 扩展方法, 参考微信Input文档