@xwink/ui

    PinInput

    验证码、交易密码这类定长输入。输入自动跳下一格,退格回上一格,粘贴整串自动分格;otp(缺省开)让浏览器能从短信或邮件里自动填入。

    验证码与遮罩密码

    当前值:(空)

    • v-model 是字符串(后端与校验规则都按字符串),不是每格一项的数组。填满最后一格时发 complete,带完整的值,可以直接提交。
    • type 缺省 number:只收数字并弹数字键盘;字母数字混合的码用 text。
    • 格子是方的,边长就是控件高度,跟 size 走;外观跟 XInput 同一套 variant。

    API

    Props

    名称类型默认值说明
    lengthnumber | undefined6几位,缺省 6
    type"number" | "text" | undefined"number"number(缺省)只收数字并弹数字键盘,text 收任意字符
    maskboolean | undefinedfalse遮成圆点(交易密码)
    otpboolean | undefinedtrue一次性验证码:浏览器可从短信 / 邮件自动填入,缺省开
    placeholderstring | undefinedundefined空格里的占位字
    disabledboolean | undefinedfalse—
    ariaLabelstring | undefinedundefined—
    size"mini" | "small" | "medium" | "large" | "super" | undefinedundefined尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size
    variantFieldVariant | undefinedundefined—
    modelValuestring | undefined""—

    Emits

    事件载荷说明
    update:modelValue[value: string]—
    complete[value: string]—