跳到主要内容

搜索输入框

用于需要输入关键字并进行搜索的场景。

何时使用​

适用于通过关键字搜索、过滤数据的场景，如：

  • 谷歌搜索
  • 商品查询
  • 地图位置查找
  • 视频平台内容搜索

一、属性​

1. 数据​

  • 数据绑定： 可绑定父组件数据源字段，详见数据绑定

  • 初始值： 设置输入框的默认值

数据绑定配置
初始值配置

2. 功能​

2.1 占位提示​

提示用户输入内容、格式等：

占位提示

2.2 最大长度​

设置用户可输入的最大字符数（如 50 个字符）

2.3 前置标签​

用于显示文字或徽标图标：

  • 文字标签：

    前置文字标签

  • 图标标签：

    前置图标标签

2.4 后置标签​

  • 文字标签：

    后置文字标签

  • 图标标签：

    后置图标标签

2.5 前缀​

与前置标签类似，但形式不同：

  • 文字前缀：

    文字前缀

  • 图标前缀：

    图标前缀

2.6 后缀​

类似前缀，位置在末尾：

  • 文字后缀：

    文字后缀

  • 图标后缀：

    图标后缀

2.7 字数统计​

展示用户已输入的字符数量：

字数统计

2.8 支持清除​

输入框右侧显示“清除”图标，用户可一键清除内容：

支持清除

3. 外观​

支持配置尺寸、边框、搜索按钮样式等：

外观属性面板

3.1 尺寸​

支持小 / 中 / 大三种尺寸：

尺寸对比

3.2 显示边框​

可选择是否显示边框，默认开启：

不显示边框效果

3.3 按钮样式​

启用后显示内置搜索按钮：

按钮样式效果

4. 状态​

详见通用状态

二、样式​

详见通用样式

三、常见使用场景​

1. 谷歌搜索输入框​

搜索场景1

2. 地图地址搜索​

搜索场景2

3. 页面数据过滤（如用户信息）​

搜索场景3