Skip to content

Commit b80a2b4

Browse files
javaLuojavaLuo
committed
1.0.0 支持图片/增加onClick回调
1 parent ff92e11 commit b80a2b4

File tree

4 files changed

+85
-77
lines changed

4 files changed

+85
-77
lines changed

‎example/src/index.js‎

Lines changed: 35 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,69 @@
11
import React from 'react';
22
import Vcode from '../../dist/index.js';
33
import ReactDom from 'react-dom';
4-
4+
import ImgTest1 from '../assets/test1.png';
5+
import ImgTest2 from '../assets/test2.png';
56
class Test extends React.Component {
67
constructor(props) {
78
super(props);
89
this.state = {
9-
input1: '', // 第1个input的值
10+
img: 1,
1011
input2: '', // 第2个input的值
11-
vcode1: '', // 第1个vcode的值
12-
vcode2: '', // 第2个vcode的值
12+
vcode2: '-1', // 第2个vcode的值
1313
code: '',
14-
testinput: '',
1514
};
1615
}
1716

18-
onInput1Change(e) {
19-
this.setState({
20-
input1: e.target.value,
21-
});
22-
}
23-
24-
onVcode1Change(v) {
25-
console.log()
26-
this.setState({
27-
vcode1: v,
28-
code: this.state.testinput
29-
});
30-
}
31-
3217
onInput2Change(e) {
3318
this.setState({
3419
input2: e.target.value,
3520
});
3621
}
3722

3823
onVcode2Change(v) {
24+
console.log("触发回调onChange", v);
3925
this.setState({
4026
vcode2: v,
4127
});
4228
}
4329

44-
onButton() {
45-
this.setState({
46-
code: this.state.testinput
47-
});
48-
}
30+
onChangeImg(){
31+
this.setState({
32+
img: this.state.img === 1 ? 2 : 1
33+
})
34+
}
35+
onChangeStr(){
36+
const a = ['a','b','c','d'];
37+
const d = [];
38+
for(let i=0;i<5;i++){
39+
d.push(Math.round(Math.random()*3));
40+
}
41+
this.setState({
42+
code: d.join(""),
43+
})
44+
}
4945

50-
onTestInput(e) {
51-
this.setState({
52-
testinput: e.target.value
53-
});
54-
}
46+
onVcodeClick(){
47+
this.onChangeStr();
48+
}
5549
render() {
5650
return (
5751
<div>
5852
<div>
59-
<div>基本使用</div>
60-
<input type='text' value={this.state.input1} onChange={(e) => this.onInput1Change(e)} maxLength={10} />
61-
<Vcode
62-
onChange={(v) => this.onVcode1Change(v)}
63-
value={this.state.code}
53+
<input
54+
type='text'
55+
placeholder="请输入正确的验证码"
56+
value={this.state.input2}
57+
onChange={(e) => this.onInput2Change(e)}
58+
maxLength={20}
6459
/>
65-
<span>{this.state.input1 === this.state.vcode1 ? 'success' : 'error'}</span>
66-
<input value={this.state.testinput} onChange={(e) => this.onTestInput(e)}/>
67-
<button onClick={() => this.onButton()}>手动改变</button>
68-
</div>
69-
<hr />
70-
<div>
71-
<div>自定义参数</div>
72-
<input type='text' value={this.state.input2} onChange={(e) => this.onInput2Change(e)} maxLength={10} />
7360
<Vcode
7461
onChange={(v) => this.onVcode2Change(v)}
62+
onClick={(v) => this.onVcodeClick(v)}
7563
length={6}
7664
width={200}
7765
height={100}
78-
value='Hello World'
66+
value={this.state.img === 1 ? ImgTest2 : ImgTest1}
7967
className="classNameTest"
8068
options={{
8169
codes: ['A', 'B', 'C', 'D', 'E'],
@@ -84,8 +72,11 @@ class Test extends React.Component {
8472
lineWidthMax: 200
8573
}}
8674
/>
87-
<span>{this.state.input2 === this.state.vcode2 ? 'success' : 'error'}</span>
75+
<span>{this.state.input2 === this.state.vcode2 ? '输入正确' : '输入错误'}</span>
8876
</div>
77+
<hr/>
78+
<button onClick={()=>this.onChangeImg()}>更换图片</button>
79+
<button onClick={()=>this.onChangeStr()}>外部生成随机字符串</button>
8980
</div>
9081
);
9182
}

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-vcode",
3-
"version": "0.0.4",
3+
"version": "1.0.0",
44
"description": "a react verification code component",
55
"main": "dist/index.js",
66
"scripts": {
@@ -28,13 +28,14 @@
2828
"babel-preset-react": "^6.24.1",
2929
"babel-preset-stage-3": "^6.24.1",
3030
"css-loader": "^0.28.2",
31+
"file-loader": "^1.1.11",
3132
"style-loader": "^0.18.1",
3233
"url-loader": "^0.5.8",
3334
"webpack": "^2.6.0",
3435
"webpack-dev-server": "^2.4.5"
3536
},
3637
"dependencies": {
37-
"react": "^15.5.4",
38-
"react-dom": "^15.5.4"
38+
"react": "^16.4.1",
39+
"react-dom": "^16.4.1"
3940
}
4041
}

‎src/index.js‎

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ class Vcode extends React.Component {
6262
}
6363

6464
/** 组件参数改变 **/
65-
componentWillReceiveProps(nextP, nextS) {
65+
UNSAFE_componentWillReceiveProps(nextP, nextS) {
6666
if(this.props.value !== nextP.value) {
6767
this.onDraw(nextP.value);
6868
}
@@ -77,12 +77,16 @@ class Vcode extends React.Component {
7777
/** 用户点击的验证码图片 **/
7878
onClick() {
7979
const div = document.getElementById(this.state.id);
80-
div.innerHTML = '';
81-
this.onDraw(this.props.value);
80+
// 如果this.props.value有值，表明值是外部受控，这个地方不需要重新渲染
81+
let code = null;
82+
if(!this.props.value){
83+
code = this.onDraw(this.props.value);
84+
}
85+
this.props.onClick && this.props.onClick(); // 触发外部的onClick,什么都不返回
8286
}
8387

8488
/** 随机生成一个Code的CSS样式 **/
85-
codeCss() {
89+
codeCss(uW,i) {
8690
return [
8791
`font-size:${this.randint(this.state.options.fontSizeMin,
8892
this.state.options.fontSizeMax)}px`,
@@ -129,42 +133,39 @@ class Vcode extends React.Component {
129133
onDraw(value) {
130134
let c = ''; // 存储生成的code
131135
const div = document.getElementById(this.state.id);
136+
const isImg = /^http[s]*:\/\/|\.jpg$|\.png$|\.jpeg$|\.gif$|\.bmp$|\.webp$|^data:image/.test(value); // 是否是图片
132137
div.innerHTML = '';
133138

134-
/** 生成好看的code **/
135-
const codeCss = this.codeCss();
136-
137-
if(value !== undefined) { // 如果父级指定了要生成的code
138-
const uW = this.state.width / value.length; // 每个字符占的宽度
139-
for (let i = 0; i < value.length; i++) {
140-
const dom = document.createElement('span');
141-
dom.style.cssText = codeCss;
142-
const temp = value[i];
143-
dom.innerHTML = temp;
144-
c = `${c}${temp}`;
145-
div.appendChild(dom);
146-
}
147-
} else {
148-
const uW = this.state.width / this.state.len; // 每个字符占的宽度
149-
for (let i = 0; i < this.state.len; i++) {
150-
const dom = document.createElement('span');
151-
dom.style.cssText = codeCss;
152-
const temp = this.state.options.codes[(Math.round(Math.random() * (this.state.options.codes.length - 1)))];
153-
dom.innerHTML = temp;
154-
c = `${c}${temp}`;
139+
if(isImg){ // 用户传递了一张图片
140+
const dom = document.createElement("img");
141+
dom.style.cssText = ["display: block","max-width:100%","max-height:100%"].join(";");
142+
dom.src = value;
155143
div.appendChild(dom);
156-
}
144+
this.props.onChange && this.props.onChange(null);
145+
return null;
157146
}
158147

148+
// 不是图片而是普通字符串, 如果value存在说明是用户自定义的字符串
149+
let length = value.length || this.state.len; // 字符的长度
150+
151+
const uW = this.state.width / length/1.01; // 每个字符占的宽度
152+
for (let i = 0; i < length; i++) {
153+
const dom = document.createElement('span');
154+
dom.style.cssText = this.codeCss(uW,i);
155+
const temp = value ? value[i] : this.state.options.codes[(Math.round(Math.random() * (this.state.options.codes.length - 1)))];
156+
dom.innerHTML = temp;
157+
c = `${c}${temp}`;
158+
div.appendChild(dom);
159+
}
160+
159161
// 生成好看的线条
160162
for (let i = 0; i < this.state.options.lines; i++) {
161163
const dom = document.createElement('div');
162164
dom.style.cssText = this.lineCss();
163165
div.appendChild(dom);
164166
}
165-
if (this.props.onChange) {
166-
this.props.onChange(c);
167-
}
167+
this.props.onChange && this.props.onChange(c); // 触发回调
168+
return c;
168169
}
169170

170171
/** 生成范围随机数 **/

‎webpack.config.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,22 @@ module.exports = {
1515
include: [
1616
path.join(__dirname, 'example')
1717
]
18-
}]
18+
},
19+
{
20+
test: /\.(png|jpg|gif)$/,
21+
loader: 'url-loader?limit=8132&name=images/[name].[ext]',
22+
include: [
23+
path.join(__dirname, 'example')
24+
]
25+
},
26+
{
27+
test: /\.(eot|woff|svg|ttf|woff2|appcache|mp3|pdf|png)(\?|$)/,
28+
loader: 'file-loader?name=files/[name].[ext]',
29+
include: [
30+
path.join(__dirname, 'src')
31+
]
32+
}
33+
]
1934
},
2035
devServer: {
2136
contentBase: path.join(__dirname, 'example')

0 commit comments

Comments
 (0)