跳到主要内容

文本输入框

用于用户输入文本的场景，如表单、搜索、聊天等。

一、何时使用​

适用于用户需要输入文字的场景：

  • 用户注册 / 登录信息填写
  • 用户资料编辑（如昵称、邮箱）
  • 搜索功能输入
  • 聊天输入框等

二、属性配置​

1. 数据配置​

数据属性

1.1 数据绑定​

支持绑定父组件的数据源，详见：数据绑定。

1.2 初始值设置​

初始值可通过以下两种方式设置：

  • 手动赋值
  • 视图参数引用（用于动态传值）

2. 功能设置​

功能配置

2.1 占位提示​

为用户提供输入指引，如“请输入用户名”：

占位提示

2.2 最大长度限制​

限制用户输入文本的最大字符数：

最大长度

2.3 前缀设置​

出现在输入框左侧，用于：

  • 指明输入内容类型
  • 提供图标增强理解

示例：

前缀示例

2.4 后缀设置​

出现在输入框右侧，用于：

  • 补充单位（如：kg、%）
  • 操作按钮（如：搜索、查看密码）
  • 状态提示（如：加载中、校验中）

示例：

后缀示例

2.5 支持清除功能​

允许用户一键清除输入内容：

清除功能

3. 外观设置​

3.1 尺寸设置​

支持两种尺寸：

  • 普通（默认）
  • 大尺寸

对比示例：

尺寸设置

4. 状态支持​

暂无组件专属状态，详见：通用状态。

三、样式说明​

暂无特殊样式设置，详见：通用样式。

四、典型使用场景​

1. 表单输入示例​

通过前缀图标，指明所需输入的内容类型：

表单输入场景