验证码输入 VerificationCode
验证码输入框的基本用法。
配合表单使用
Section titled “配合表单使用”配合表单使用实现校验。
通过 formatter 校验输入。此外,可以返回非布尔类型来将用户输入的字符串为特定的格式。
指定 masked = true可开启密码模式
自定义分隔符
Section titled “自定义分隔符”指定 separator 可以自定义渲染分隔符。
禁用状态、只读状态、错误状态。
<verification-code> Props
Section titled “<verification-code> Props”| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value (v-model) | 绑定值 | string | - |
| default-value | 默认值(非受控状态) | string | '' |
| length | 验证码的长度,根据长度渲染对应个数的输入框 | number | 6 |
| size | 输入框大小 | 'mini' | 'small' | 'medium' | 'large' | 'medium' |
| disabled | 是否禁用 | boolean | false |
| masked | 是否密码模式 | boolean | false |
| readonly | 只读 | boolean | false |
| error | 是否为错误状态 | boolean | false |
| separator | 分隔符。可在不同索引的输入框后自定义渲染分隔符 | (index: number, character: string) => VNode | - |
| formatter | 格式化函数,当用户输入值改变时触发 | (inputValue: string, index: number, value: string) => string | boolean | - |
<verification-code> Events
Section titled “<verification-code> Events”| 事件名 | 描述 | 参数 |
|---|---|---|
| change | 值发生改变时触发 | value: string |
| finish | 填充完成时触发 | value: string |
| input | 输入时触发 | inputValue: stringindex: numberev: Event |