Skip to content

Commit 0dae2f6

Browse files
author
luoxin
committed
0.0.2 可指定要生成的code
1 parent 864ba8d commit 0dae2f6

File tree

6 files changed

+93
-35
lines changed

6 files changed

+93
-35
lines changed

‎example/assets/test1.png‎

-44 Bytes
Loading

‎example/assets/test2.png‎

806 Bytes
Loading

‎example/src/index.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ class Test extends React.Component {
1010
input2: '', // 第2个input的值
1111
vcode1: '', // 第1个vcode的值
1212
vcode2: '', // 第2个vcode的值
13+
code: '',
14+
testinput: '',
1315
};
1416
}
1517

@@ -20,8 +22,10 @@ class Test extends React.Component {
2022
}
2123

2224
onVcode1Change(v) {
25+
console.log()
2326
this.setState({
2427
vcode1: v,
28+
code: this.state.testinput
2529
});
2630
}
2731

@@ -37,6 +41,17 @@ class Test extends React.Component {
3741
});
3842
}
3943

44+
onButton() {
45+
this.setState({
46+
code: this.state.testinput
47+
});
48+
}
49+
50+
onTestInput(e) {
51+
this.setState({
52+
testinput: e.target.value
53+
});
54+
}
4055
render() {
4156
return (
4257
<div>
@@ -45,8 +60,11 @@ class Test extends React.Component {
4560
<input type='text' value={this.state.input1} onChange={(e) => this.onInput1Change(e)} maxLength={10} />
4661
<Vcode
4762
onChange={(v) => this.onVcode1Change(v)}
63+
value={this.state.code}
4864
/>
4965
<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>
5068
</div>
5169
<hr />
5270
<div>
@@ -57,8 +75,8 @@ class Test extends React.Component {
5775
length={6}
5876
width={200}
5977
height={100}
78+
value='Hello World'
6079
className="classNameTest"
61-
style={{ backgroundColor: '#cccccc' }}
6280
options={{
6381
codes: ['A', 'B', 'C', 'D', 'E'],
6482
lines: 20,

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-vcode",
3-
"version": "0.0.1",
3+
"version": "0.0.2",
44
"description": "a react verification code component",
55
"main": "dist/index.js",
66
"scripts": {

‎src/index.js‎

Lines changed: 72 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ class Vcode extends React.Component {
77
id: this.props.id || `${new Date().getTime()}_${Math.random().toFixed(4)}`, // 需要一个唯一的ID，因为vcode要直接操作dom
88
width: this.props.width || 150, // vcode宽度
99
height: this.props.height || 40, // vcode高度
10-
length: this.props.length || 4, // 生成几位code
10+
len: this.props.length || 4, // 生成几位code
1111
style: (() => { // vcode容器样式
1212
const a = {
1313
position: 'relative',
@@ -34,8 +34,8 @@ class Vcode extends React.Component {
3434
fontSizeMin: 22, // 字体尺寸最小值
3535
fontSizeMax: 26, // 字体尺寸最大值
3636
colors: [ // 字可能的颜色
37-
'117cb3',
38-
'f47b06',
37+
'#117cb3',
38+
'#f47b06',
3939
'#202890',
4040
'#db1821',
4141
'#b812c2',
@@ -71,47 +71,86 @@ class Vcode extends React.Component {
7171

7272
/** 组件初始化完毕时触发 **/
7373
componentDidMount() {
74-
this.onDraw();
74+
this.onDraw(this.props.value);
75+
}
76+
77+
/** 组件参数改变 **/
78+
componentWillReceiveProps(nextP) {
79+
if(this.props.value !== nextP.value) {
80+
this.onDraw(nextP.value);
81+
}
7582
}
7683

7784
/** 用户点击的验证码图片 **/
7885
onClick() {
7986
const div = document.getElementById(this.state.id);
8087
div.innerHTML = '';
81-
this.onDraw();
88+
this.onDraw(this.props.value);
8289
}
8390

8491
/** 随机生成验证码 **/
85-
onDraw() {
92+
onDraw(value) {
8693
let c = ''; // 存储生成的code
8794
const div = document.getElementById(this.state.id);
88-
const uW = this.state.width / this.state.length; // 每个字符占的宽度
95+
div.innerHTML = '';
96+
/** 生成好看的code **/
97+
console.log(this.props.value);
8998

90-
// 生成好看的code
91-
for (let i = 0; i < this.state.length; i++) {
92-
const dom = document.createElement('span');
93-
dom.style.cssText = [
94-
`font-size:${this.randint(this.state.options.fontSizeMin,
95-
this.state.options.fontSizeMax)}px`,
96-
`color:${this.state.options.colors[this.randint(0,
97-
this.state.options.colors.length - 1)]}`,
98-
'position: absolute',
99-
`left:${this.randint(uW * i, ((uW * i) + uW) - (uW / 2))}px`,
100-
'top:50%',
101-
`transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
102-
`-o-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
103-
`-ms-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
104-
`-moz-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
105-
`-webkit-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
106-
`font-family:${this.state.options.fonts[this.randint(0,
107-
this.state.options.fonts.length - 1)]}`,
108-
'font-weight:bold',
109-
'z-index:2',
110-
].join(';');
111-
const temp = this.state.options.codes[(Math.round(Math.random() * (this.state.options.codes.length - 1)))];
112-
dom.innerHTML = temp;
113-
c = `${c}${temp}`;
114-
div.appendChild(dom);
99+
if(value !== undefined) { // 如果父级指定了要生成的code
100+
const uW = this.state.width / value.length; // 每个字符占的宽度
101+
for (let i = 0; i < value.length; i++) {
102+
const dom = document.createElement('span');
103+
dom.style.cssText = [
104+
`font-size:${this.randint(this.state.options.fontSizeMin,
105+
this.state.options.fontSizeMax)}px`,
106+
`color:${this.state.options.colors[this.randint(0,
107+
this.state.options.colors.length - 1)]}`,
108+
'position: absolute',
109+
`left:${this.randint(uW * i, ((uW * i) + uW) - (uW / 2))}px`,
110+
'top:50%',
111+
`transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
112+
`-o-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
113+
`-ms-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
114+
`-moz-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
115+
`-webkit-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
116+
`font-family:${this.state.options.fonts[this.randint(0,
117+
this.state.options.fonts.length - 1)]}`,
118+
'font-weight:bold',
119+
'z-index:2',
120+
].join(';');
121+
const temp = value[i];
122+
dom.innerHTML = temp;
123+
c = `${c}${temp}`;
124+
div.appendChild(dom);
125+
}
126+
} else {
127+
console.log('走这里');
128+
const uW = this.state.width / this.state.len; // 每个字符占的宽度
129+
for (let i = 0; i < this.state.len; i++) {
130+
const dom = document.createElement('span');
131+
dom.style.cssText = [
132+
`font-size:${this.randint(this.state.options.fontSizeMin,
133+
this.state.options.fontSizeMax)}px`,
134+
`color:${this.state.options.colors[this.randint(0,
135+
this.state.options.colors.length - 1)]}`,
136+
'position: absolute',
137+
`left:${this.randint(uW * i, ((uW * i) + uW) - (uW / 2))}px`,
138+
'top:50%',
139+
`transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
140+
`-o-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
141+
`-ms-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
142+
`-moz-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
143+
`-webkit-transform:rotate(${this.randint(-15, 15)}deg) translateY(-50%)`,
144+
`font-family:${this.state.options.fonts[this.randint(0,
145+
this.state.options.fonts.length - 1)]}`,
146+
'font-weight:bold',
147+
'z-index:2',
148+
].join(';');
149+
const temp = this.state.options.codes[(Math.round(Math.random() * (this.state.options.codes.length - 1)))];
150+
dom.innerHTML = temp;
151+
c = `${c}${temp}`;
152+
div.appendChild(dom);
153+
}
115154
}
116155

117156
// 生成好看的线条
@@ -167,6 +206,7 @@ export default Vcode;
167206
/**
168207
id: P.string, // ID
169208
length: P.number, // 生成几位字符串
209+
value: P.string, // 由父级传入指定的字符串生成code
170210
width: P.number, // 多宽 px
171211
height: P.number, // 多高 px
172212
style: P.object, // 自定义style

‎webpack.build.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ module.exports = {
7070
// Uglify 加密压缩源代码
7171
new webpack.optimize.UglifyJsPlugin({
7272
output: {
73-
comments: false, // 删除代码中所有注释
73+
comments: false, // 是否保留代码格式和所有注释
7474
},
7575
compress: {
7676
warnings: false, // 删除没有用的代码时是否发出警告

0 commit comments

Comments
 (0)