跳到主要内容

密码输入框

用于密码输入场景。

何时使用

用于密码输入的场景:

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

一、属性

1. 数据

绑定父组件的数据源字段,详见 数据绑定

数据绑定示例

  • 数据绑定: 绑定父组件的数据字段
  • 初始值: 输入框的默认值,可手动设置或绑定视图参数

初始值设置

2. 功能

功能面板如下图所示:

功能面板

2.1 占位提示

用于提示用户输入格式或内容,例如“请输入密码”。

占位提示

2.2 最大长度

限制用户的最大输入长度,例如限制为 16 位。

最大长度设置

2.3 密码可见 / 显示切换

启用密码可见后,输入内容以明文展示。启用“显示切换”后可切换明文与小圆点显示样式。

密码显示切换

2.4 前置标签 / 后置标签

设置在输入框两侧的辅助标签。

标签示例

2.5 前缀、字数统计、支持清除

  • 前缀: 输入框前显示图标或字符
  • 字数统计: 显示当前输入的字符数
  • 支持清除: 显示清除按钮,点击后清空内容

功能细节

3. 外观

密码输入框支持设置尺寸及边框样式。

3.1 尺寸

支持小(small)、中(default)、大(large)三种尺寸。

尺寸示例

3.2 显示边框

可设置是否显示边框。

边框设置

4. 状态

详见 通用状态

二、样式

详见 通用样式

三、常见使用场景

  1. 输入用户名

用户名场景

  1. 个性签名输入框

个性签名场景