Taroify

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)	-