1
1
# react-vcode [ ![ npm] ( https://img.shields.io/npm/v/react-vcode.svg )] ( https://www.npmjs.com/package/react-vcode ) [ ![ codebeat badge] ( https://codebeat.co/badges/6b270f5e-c8d9-4f47-9f84-2833fcf897aa )] ( https://codebeat.co/projects/github-com-javaluo-react-vcode-master ) [ ![ npm] ( https://img.shields.io/npm/dy/react-vcode.svg )] ( https://www.npmjs.com/package/react-vcode )
2
2
一个简单的React验证码组件
3
3
4
- ## 0. 示例图
5
-
6
- #### 基本
4
+ ## 示例图
7
5
8
6
![ image] ( https://github.com/javaLuo/react-vcode/blob/master/example/assets/test1.png )
9
7
10
- #### 自定义参数
11
-
12
8
![ image] ( https://github.com/javaLuo/react-vcode/blob/master/example/assets/test2.png )
13
9
14
10
@@ -32,23 +28,23 @@ import Vcode from 'react-vcode';
32
28
可自行设置覆盖原有值
33
29
34
30
```` bash
35
- id # string 一个ID 可手动设置也可以不管,默认值:时间戳+随机数
36
- value # string 受控,可指定要生成的验证码,而不是随机生成
37
- length: 4 # number 生成几位验证码
38
- width: 150 # number 容器宽度
39
- height: 40 # number 容器高度
40
- className # string 自定义样式class, 默认值:无
41
- onChange # func 生成新的验证码时触发,将新的验证码字符串返回上级
42
- style: { # object 容器样式 ( 注:如果在style中设置width和height,将覆盖上面通过属性设置的width和height)
31
+ value # string 受控,不设置的话将随机生成验证码 (支持的值: 普通字符串/网络图片路径/import的本地图片/base64图片)
32
+ onChange # func 回调,生成新的验证码时触发,将新的验证码字符串返回上级 (如果value字段被传入了图片,将返回null)
33
+ onClick # func 回调,点击组件本身时触发,外部可通过此回调来更新需要传入的验证码 (如果没设置value,点击就会自动重新生成二维码)
34
+ length: 4 # number 生成几位验证码(没设置value时有效)
35
+ width: 150 # number 容器宽度(px)
36
+ height: 40 # number 容器高度(px)
37
+ className # string 自定义容器样式class
38
+ style: { # object 容器默认样式 ( 注:如果在style中设置width和height,将覆盖上面通过属性设置的width和height)
43
39
position: ' relative' ,
44
40
backgroundColor: ' #fff' ,
45
41
overflow: ' hidden' ,
46
42
cursor: ' pointer' ,
47
43
verticalAlign: ' middle' ,
48
44
userSelect: ' none' ,
49
45
}
50
- options:{ # 自定义参数
51
- codes: [ # 所有可能出现的字符
46
+ options:{ # 验证码相关自定义参数
47
+ codes: [ # 所有可能出现的字符
52
48
' a' , ' b' , ' c' , ' d' , ' e' , ' f' , ' g' , ' h' , ' i' , ' j' , ' k' , ' l' , ' m' ,
53
49
' o' , ' p' , ' q' , ' r' , ' s' , ' t' , ' x' , ' u' , ' v' , ' y' , ' z' , ' w' , ' n' ,
54
50
' 0' , ' 1' , ' 2' , ' 3' , ' 4' , ' 5' , ' 6' , ' 7' , ' 8' , ' 9' ,
@@ -87,7 +83,6 @@ options:{ # 自定义参数
87
83
# 例子:
88
84
89
85
< Vcode
90
- id=' test'
91
86
length={6}
92
87
onChange={(v) => {console.log(' 当前的验证码值:' , v)}}
93
88
options={{ codes: [ ' A' , ' B' , ' C' ] }}
0 commit comments