PinInput
验证码、交易密码这类定长输入。输入自动跳下一格,退格回上一格,粘贴整串自动分格;otp(缺省开)让浏览器能从短信或邮件里自动填入。
验证码与遮罩密码
当前值:(空)
v-model是字符串(后端与校验规则都按字符串),不是每格一项的数组。填满最后一格时发complete,带完整的值,可以直接提交。type缺省number:只收数字并弹数字键盘;字母数字混合的码用text。- 格子是方的,边长就是控件高度,跟
size走;外观跟XInput同一套variant。
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
length | number | undefined | 6 | 几位,缺省 6 |
type | "number" | "text" | undefined | "number" | number(缺省)只收数字并弹数字键盘,text 收任意字符 |
mask | boolean | undefined | false | 遮成圆点(交易密码) |
otp | boolean | undefined | true | 一次性验证码:浏览器可从短信 / 邮件自动填入,缺省开 |
placeholder | string | undefined | undefined | 空格里的占位字 |
disabled | boolean | undefined | false | — |
ariaLabel | string | undefined | undefined | — |
size | "mini" | "small" | "medium" | "large" | "super" | undefined | undefined | 尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size |
variant | FieldVariant | undefined | undefined | — |
modelValue | string | undefined | "" | — |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
update:modelValue | [value: string] | — |
complete | [value: string] | — |