跳到主要内容

密码输入框

用于输入类型为密码的字段，支持隐藏字符、清除、前后缀提示等功能。

一、何时使用​

适用于以下场景的密码输入：

  • 用户登录
  • 用户注册
  • 找回密码
  • 支付验证

二、属性配置​

1. 数据设置​

密码输入框的数据绑定支持绑定字段，通常用于表单数据模型中的密码字段。

数据绑定

1.1 数据绑定​

字段绑定方式如下所示：

字段绑定界面

绑定字段需调用 API 返回动态数据：

字段绑定-动态加载

1.2 初始值​

初始值支持：

  • 手动赋值
  • 视图参数绑定

绑定方式示意如下：

初始值配置界面

手动赋值效果如下：

初始值-示意图

2. 功能设置​

功能配置面板

2.1 占位提示​

用于提示输入要求，如格式说明、内容提示：

占位提示效果

2.2 最大长度​

用于限制输入密码的最大字符数：

最大长度设置

2.3 前缀​

支持文字或图标形式的前缀：

  • 手动赋值前缀
    手动前缀效果

  • 图标前缀
    图标前缀效果

2.4 后缀​

支持文字或图标形式的后缀：

  • 手动赋值后缀
    手动后缀效果

  • 图标后缀
    图标后缀效果

2.5 支持清除​

开启后可一键清除密码输入框内容：

清除按钮示意

3. 外观设置​

支持两种尺寸选择：普通尺寸、大尺寸

尺寸设置面板

尺寸对比如下：

尺寸对比图

4. 状态​

无特殊状态，详见：通用状态。

三、规则​

1. 表单校验​

支持配合表单使用，添加必填、长度、格式等校验规则。

2. 显示控制​

可通过条件控制该组件是否显示，详见：显示控制。

四、样式​

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

五、常见使用场景​

示例：输入用户名与密码登录​

登录场景示例图