• Vant React

PasswordInput 密码输入框

介绍

带网格的输入框组件,可以用于输入密码、短信验证码等场景,通常与数字键盘组件配合使用。

引入

import { PasswordInput } from "@taroify/core";

代码演示

基础用法

搭配数字键盘组件来实现密码输入功能。

function BasicPasswordInput() {
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState("123")

  return (
    <>
      <PasswordInput focus value={value} onFocus={() => setOpen(true)} />
      <NumberKeyboard
        open={open}
        onKeyPress={(key) => setValue(value + key)}
        onBackspace={() => setValue(value.substring(0, value.length - 1))}
        onHide={() => setOpen(false)}
      />
    </>
  )
}

自定义长度

通过 length 属性来设置密码长度。

<PasswordInput length={6} value="123" />

格子间距

通过 gutter 属性来设置格子之间的间距。

<PasswordInput gutter={10} value="123" />

明文展示

mask 设置为 false 可以明文展示输入的内容,适用于短信验证码等场景。

<PasswordInput mask={false} value="123" />

提示信息

通过 info 属性设置提示信息,通过 error 属性设置错误提示,例如当输入六位时提示密码错误。

<PasswordInput info="密码为 6 位数字" value="123" />

API

Props

参数 说明 类型 默认值
value 密码值 string ''
length 密码最大长度 number | string 6
gutter 输入框格子之间的间距,如 20px 2em,默认单位为px number | string 0
mask 是否隐藏密码内容 boolean true
focus 是否聚焦,聚焦时会显示光标 boolean false
info 输入框下方文字提示 string -
error 输入框下方错误提示 boolean -

Events

事件名 说明 回调参数
onFocus 输入框聚焦时触发 -