@@ -27,38 +27,38 @@ import Vcode from 'react-vcode';
2727
2828可自行设置覆盖原有值
2929
30- ```` bash
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)
30+ ```` javascript
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)
3939 position: ' relative' ,
4040 backgroundColor: ' #fff' ,
4141 overflow: ' hidden' ,
4242 cursor: ' pointer' ,
4343 verticalAlign: ' middle' ,
4444 userSelect: ' none' ,
4545}
46- options:{ # 验证码相关自定义参数
47- codes: [ # 所有可能出现的字符
46+ options: { // 验证码相关自定义参数
47+ codes: [ // 所有可能出现的字符
4848 ' a' , ' b' , ' c' , ' d' , ' e' , ' f' , ' g' , ' h' , ' i' , ' j' , ' k' , ' l' , ' m' ,
4949 ' o' , ' p' , ' q' , ' r' , ' s' , ' t' , ' x' , ' u' , ' v' , ' y' , ' z' , ' w' , ' n' ,
5050 ' 0' , ' 1' , ' 2' , ' 3' , ' 4' , ' 5' , ' 6' , ' 7' , ' 8' , ' 9' ,
5151 ],
52- fontSizeMin: 22, # 字体尺寸最小值
53- fontSizeMax: 26, # 字体尺寸最大值
54- colors: [ # 字可能的颜色
52+ fontSizeMin: 22 , // 字体尺寸最小值
53+ fontSizeMax: 26 , // 字体尺寸最大值
54+ colors: [ // 字可能的颜色
5555 ' #117cb3' ,
5656 ' #f47b06' ,
5757 ' #202890' ,
5858 ' #db1821' ,
5959 ' #b812c2' ,
6060 ],
61- fonts: [ # 可能的字体
61+ fonts: [ // 可能的字体
6262 ' Times New Roman' ,
6363 ' Georgia' ,
6464 ' Serif' ,
@@ -67,20 +67,20 @@ options:{ # 验证码相关自定义参数
6767 ' tahoma' ,
6868 ' Hiragino Sans GB' ,
6969 ],
70- lines: 8, # 生成多少根干扰线
71- lineColors: [ # 线可能的颜色
70+ lines: 8 , // 生成多少根干扰线
71+ lineColors: [ // 线可能的颜色
7272 ' #7999e1' ,
7373 ' #383838' ,
7474 ' #ec856d' ,
7575 ' #008888' ,
7676 ],
77- lineHeightMin: 1, # 线的粗细最小值
78- lineHeightMax: 1, # 线的粗细最大值
79- lineWidthMin: 20, # 线的长度最小值
80- lineWidthMax: 60, # 线的长度最大值
77+ lineHeightMin: 1 , // 线的粗细最小值
78+ lineHeightMax: 1 , // 线的粗细最大值
79+ lineWidthMin: 20 , // 线的长度最小值
80+ lineWidthMax: 60 , // 线的长度最大值
8181}
8282
83- # 例子:
83+ // 例子:
8484
8585< Vcode
8686 length= {6 }
@@ -91,4 +91,10 @@ options:{ # 验证码相关自定义参数
9191
9292## 4. 额外说明
9393
94- * 之前用过一个验证码插件叫 vcode.js, 不知道作者。 本react-vcode是通过vcode.js的源码进行修改加工,转成了react组件。感谢原作者。
94+ - 之前用过一个验证码插件叫 vcode.js, 不知道作者。 本react-vcode是通过vcode.js的源码进行修改加工,转成了react组件。感谢原作者。
95+
96+ ## 更新日志
97+
98+ 1.0.3 - 2019/03/11<br />
99+ - 去掉UNSAFE_componentWillReceiveProps,使用componentDidUpdate
100+ - 修复动态改变width、height、style时不刷新的问题
0 commit comments