• 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" />

提示信息

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

<PasswordInput feedback="密码为 6 位数字" value="123" />
<PasswordInput feedback={{ color: "danger", children: "密码为 6 位数字" }} value="123" />
<PasswordInput feedback={<PasswordInput.Feedback color="danger" children="密码为 6 位数字" />} value="123" />

API

PasswordInput Props

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

PasswordInput Events

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

PasswordInput.Feedback Props

参数 说明 类型 默认值
color 颜色，可选值为 primary info success warning danger string -

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称 默认值 描述
password-input-height 50px * $hd -
password-input-margin 0 var(—padding-md) -
password-input-border-radius 6px * $hd -
password-input-item-font-size 20px * $hd -
password-input-item-background-color var(—white) -
password-input-mask-size 10px * $hd -
password-input-mask-width var(—password-input-mask-size) -
password-input-mask-height var(—password-input-mask-size) -
password-input-mask-color var(—black) -
password-input-cursor-color var(—text-color) -
password-input-cursor-width 1px * $hd -
password-input-cursor-height 40% -
password-input-cursor-animation-duration 1s -
password-input-feedback-margin-top var(—padding-md) -
password-input-feedback-font-size var(—font-size-md) -
password-input-feedback-color var(—gray-6) -
password-input-feedback-primary-color var(—primary-color) -
password-input-feedback-info-color var(—info-color) -
password-input-feedback-success-color var(—success-color) -
password-input-feedback-warning-color var(—warning-color) -
password-input-feedback-danger-color var(—danger-color) -