简体中文
search
约 606 字大约 2 分钟
简介
搜索输入框组件，支持多种类型、尺寸、状态，适用于页面顶部或模块内的搜索场景。支持清除、取消、后置自定义图标、搜索按钮，样式高度还原设计规范，支持国际化与 icon 复用。
使用方法
局部引入，在需要引入的页面或组件的 index.json 中配置：
"usingComponents": {
"search": "ava-ui/fxui/Search/index"
}代码演示
分类演示
API
search 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 类型 | string | plain/bordered | plain |
| size | 尺寸 | string | small/mini | small |
| value | 输入框内容 | string | — | '' |
| placeholder | 占位符 | string | — | '' |
| showClear | 显示清除按钮 | boolean | true/false | true |
| showCancel | 显示取消按钮 | boolean | true/false | false |
| showSearch | 显示搜索按钮 | boolean | true/false | false |
| icon | 后置自定义图标 | string | icon 名称 | '' |
| cancelText | 取消按钮文本 | string | — | 取消 |
| searchText | 搜索按钮文本 | string | — | 搜索 |
| placeholderStyle | placeholder样式 | string | — | '' |
| focus | 是否聚焦 | boolean | true/false | false |
| maxlength | 最大输入长度 | number | — | 140 |
| isNative | 是否使用原生输入框 | boolean | true/false | false |
| confirmType | 最大输入长度 | string | — | search |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| input | 输入内容变化 | |
| clear | 点击清除按钮 | — |
| cancel | 点击取消按钮 | — |
| search | 点击搜索按钮 | |
| focus | 输入框聚焦 | e.detail |
| blur | 输入框失焦 | e.detail |
| clickIcon | 点击自定义图标 | e.detail |
分类说明
类型
- 不带边框（plain）：适用于浅色背景，风格简洁
- 带边框（bordered）：适用于有分割需求或强调输入区域的场景
- 可通过
icon属性设置后置自定义图标（如语音、扫码等）
尺寸
- small：高度32px，icon 16*16，字体14px
- mini：高度28px，icon 14*14，字体13px
按钮
- 支持清除按钮（showClear）、取消按钮（showCancel）、自定义图标、搜索按钮（showSearch）
- 搜索按钮和后置自定义图标可同时存在，具体样式以设计规范为准
状态
- 默认、聚焦、输入等多种状态，均有对应样式
设计说明
- 支持 plain/bordered 两种类型，small/mini 两种尺寸
- 支持清除、取消、搜索按钮，后置自定义图标
- 支持聚焦、输入等多种状态
- icon 统一用 avaui-tdesign/icon 组件
- 国际化文本通过 fsapi.i18n.get 获取
- 支持外部样式类，便于扩展
- 结构清晰，便于维护