vue-sms-codes

基础用法

默认6位任何字符的code

c

1

2

3

c

显示代码

code类型

code-type默认为text类型，可切换为number类型只能输入数字，也可通过formatter传入方法自己实现类型处理

c

1

2

3

c

显示代码

密文模式

设置secret属性为true,可开启密文模式，输入内容不可见

c

1

2

3

c

显示代码

显示输入光标

设置show-cursor属性为true,显示光标

c

1

2

3

c

显示代码

设置code位数

设置设置code-count属性,改变code长度，默认为6位

c

1

2

3

显示代码

自动聚焦

设置设置auto-focus属性为true,组件渲染完成自动聚焦

c

1

2

3

c

显示代码

formatter

自定义输入过滤规则

显示代码

输入完成回调

输入完成回调函数，处理业务逻辑，当然你也可以在你的页面中监听绑定的v-model变量实现业务处理

显示代码

自定义样式

设置全局class，改变code组件默认样式

c

1

2

3

c

c

1

2

3

c

c

1

2

3

c

显示代码

组件props

属性名	类型	默认值	可选值	是否必须	说明
v-model	string	-	-	是	绑定值
code-type	string	'text'	'text','number'	否	输入类型
code-count	number/string	6	-	否	code长度
secret	boolean	false	true/false	否	是否密文显示
showCursor	boolean	false	true/false	否	是否显示光标
autoFocus	boolean	false	true/false	否	是否自动聚焦
formatter	function(value)	-	-	否	自定义输入内容处理函数

组件event

事件名	回调参数	说明
callback	code	code输入完成，返回输入的code码