PinCode

代码演示

如何引入

import { PinCode } from '@chenzy-design/svelte';

基本使用

size 支持 small、default、large 三种尺寸。

受控

使用 value 传入验证码字符串，配合 onChange 受控使用。

限制验证码格式

设置位数

通过 count 设置位数，默认 6 位，下方 Demo 设置为 4 位。

设置字符范围

使用 format 控制可输入的字符范围：

• 传入 "number" 只允许输入数字；
• 传入 "mixed" 允许数字和字母；
• 传入正则表达式，只允许输入可通过正则判定的字符；
• 传入函数，验证码会在输入时以字符为单位依次作为参数单独传入校验，返回 true 时允许该字符被输入进 PinCode。

手动聚焦失焦

通过 bind:this 拿到组件实例后，命令式调用 focus 与 blur，入参为对应 Input 的序号。

API 参考

属性	说明	类型	默认值
autoFocus	是否自动聚焦到第一个元素	boolean	true
class	类名	string	-
count	验证码位数	number	6
defaultValue	输入框内容默认值	string	-
disabled	禁用	boolean	false
format	验证码单个字符格式限制	'number' \| 'mixed' \| RegExp \| ((char: string) => boolean)	‘number’
size	输入框大小，large、default、small	string	‘default’
style	样式	string	-
value	输入框内容	string	-
onChange	输入回调	(value: string) => void	-
onComplete	验证码所有位数输入完毕回调	(value: string) => void	-

Methods

绑定在组件实例上的方法，可通过 bind:this 拿到实例后调用：

属性	说明
focus	聚焦，入参为验证码第几位
blur	移出焦点，入参为验证码第几位

设计变量

font

other

spacing

width

变量	默认值	用法
--cd-pincode-cell-font-size	var(--cd-font-size-header-6)	单格字符字号（略大于正文，居中显示单字符）

显示第 1 条-第 1 条，共 1 条

• 1