Skip to content

Commit f38a249

Browse files
authored
Update README.md
1 parent b80a2b4 commit f38a249

File tree

1 file changed

+11
-16
lines changed

1 file changed

+11
-16
lines changed

README.md

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
# 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)
22
一个简单的React验证码组件
33

4-
## 0. 示例图
5-
6-
#### 基本
4+
## 示例图
75

86
![image](https://github.com/javaLuo/react-vcode/blob/master/example/assets/test1.png)
97

10-
#### 自定义参数
11-
128
![image](https://github.com/javaLuo/react-vcode/blob/master/example/assets/test2.png)
139

1410

@@ -32,23 +28,23 @@ import Vcode from 'react-vcode';
3228
可自行设置覆盖原有值
3329

3430
````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)
4339
 position: 'relative',
4440
backgroundColor: '#fff',
4541
overflow: 'hidden',
4642
cursor: 'pointer',
4743
verticalAlign: 'middle',
4844
userSelect: 'none',
4945
}
50-
options:{           # 自定义参数
51-
 codes: [          # 所有可能出现的字符
46+
options:{ # 验证码相关自定义参数
47+
codes: [ # 所有可能出现的字符
5248
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
5349
'o', 'p', 'q', 'r', 's', 't', 'x', 'u', 'v', 'y', 'z', 'w', 'n',
5450
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
@@ -87,7 +83,6 @@ options:{           # 自定义参数
8783
# 例子:
8884

8985
<Vcode
90-
 id='test'
9186
length={6}
9287
 onChange={(v) => {console.log('当前的验证码值:', v)}}
9388
 options={{ codes: [ 'A', 'B', 'C' ] }}

0 commit comments

Comments
 (0)