1
1
# vue-puzzle-vcode [ ![ npm] ( https://img.shields.io/npm/v/vue-puzzle-vcode.svg )] ( https://www.npmjs.com/package/vue-puzzle-vcode ) [ ![ npm downloads] ( https://img.shields.io/npm/dt/vue-puzzle-vcode.svg )] ( https://www.npmjs.com/package/vue-puzzle-vcode )
2
- Vue 纯前端的拼图人机验证、右滑拼图验证<br />
3
- 我知道有第 3 方的很好用,比如 GEETEST 的拼图验证,但要引入 SDK 跟后台配合,还有接口交互。<br />
4
- 太麻烦了,有时候突然改需求来不及弄,为了应付老板,就弄了个纯前端的随便验一下得了。
2
+
3
+ Vue 纯前端的拼图人机验证、右滑拼图验证<br /> 我知道有第 3 方的很好用,比如 GEETEST
4
+ 的拼图验证,但要引入 SDK 跟后台配合,还有接口交互。<br /> 太麻烦了,有时候突然改
5
+ 需求来不及弄,为了应付老板,就弄了个纯前端的随便验一下得了。
5
6
6
7
** DEMO** : https://isluo.com/work/vue-puzzle-vcode/
7
8
8
9
![ img] ( public/demo.gif )
9
10
10
-
11
11
## 重要更新
12
12
13
13
2020/03/16 v1.1.0 ** 事件名改变** <br />
14
+
14
15
```
15
16
@onSuccess -> @success
16
17
@onClose -> @close
17
18
@onFail -> @fail
18
19
```
20
+
19
21
### 安装
20
22
21
23
``` node
@@ -27,77 +29,76 @@ Vue 纯前端的拼图人机验证、右滑拼图验证<br/>
27
29
``` vue
28
30
import Vcode from "vue-puzzle-vcode";
29
31
30
- <Vcode
31
- :show="isShow"
32
- @success="success"
33
- @close="close"
34
- />
32
+ <Vcode :show="isShow" @success="success" @close="close" />
35
33
```
34
+
36
35
### IE
37
- 我没加` babel-polyfill ` ,所以在IE10以下会报错:` SCRIPT1002: 语法错误 ` ,<br />
38
- 需要兼容IE的朋友,请直接复制` src/app.vue ` 和` src/assets ` 这两个东西到自己的项目里,给` app.vue ` 随便改个名字,就是个普通vue组件,直接用即可。<br />
39
- ` src/assets ` 里是两张小图片,` app.vue ` 中有引用,注意自己匹配一下引用路径
36
+
37
+ 我没加` babel-polyfill ` ,所以在 IE 里会报错:` SCRIPT1002: 语法错误 ` (IE 不支持箭头
38
+ 函数)<br /> 需要兼容 IE 的朋友,请直接复制` src/app.vue ` 和` src/assets ` 这两个东西
39
+ 到自己的项目里,给` app.vue ` 随便改个名字,就是个普通 vue 组件,直接用即可。<br />
40
+ ` src/assets ` 里是一张小图片,` app.vue ` 中有引用,注意自己匹配一下引用路径
40
41
41
42
### 最简单例子
42
43
43
44
``` vue
44
45
<template>
45
46
<div>
46
- <Vcode
47
- :show="isShow"
48
- @success="success"
49
- @close="close"
50
- />
47
+ <Vcode :show="isShow" @success="success" @close="close" />
51
48
<button @click="submit">登录</button>
52
49
</div>
53
50
</template>
54
51
55
52
<script>
56
- import Vcode from "vue-puzzle-vcode";
57
- export default {
58
- data(){
59
- return {
60
- isShow: false, // 验证码模态框是否出现
61
- }
53
+ import Vcode from "vue-puzzle-vcode";
54
+ export default {
55
+ data() {
56
+ return {
57
+ isShow: false, // 验证码模态框是否出现
58
+ };
59
+ },
60
+ components: {
61
+ Vcode,
62
+ },
63
+ methods: {
64
+ submit() {
65
+ this.isShow = true;
62
66
},
63
- components:{
64
- Vcode
67
+ // 用户通过了验证
68
+ success(msg) {
69
+ this.isShow = false; // 通过验证后,需要手动隐藏模态框
65
70
},
66
- methods:{
67
- submit(){
68
- this.isShow = true;
69
- },
70
- // 用户通过了验证
71
- success(msg){
72
- this.isShow = false; // 通过验证后,需要手动隐藏模态框
73
- },
74
- // 用户点击遮罩层,应该关闭模态框
75
- close(){
76
- this.isShow = false;
77
- }
78
- }
79
- }
71
+ // 用户点击遮罩层,应该关闭模态框
72
+ close() {
73
+ this.isShow = false;
74
+ },
75
+ },
76
+ };
80
77
</script>
81
78
```
82
79
83
80
### 参数
84
81
85
- | 字段 | 类型 | 默认值 | 说明 |
86
- | ------------ | ------- | ------------------ | ---------------------- |
87
- | show | Boolean | false | 是否显示验证码弹框 |
88
- | canvasWidth | Number | 310 | 主图区域的宽度 |
89
- | canvasHeight | Number | 160 | 主图区域的高度 |
90
- | imgs | Array | null | 自定义图片,见下方例子 |
91
- | successText | String | "验证通过!" | 验证成功时的提示文字 |
92
- | failText | String | "验证失败,请重试" | 验证失败时的提示文字 |
93
- | sliderText | String | "拖动滑块完成拼图" | 下方滑动条里的文字 |
82
+ | 字段 | 类型 | 默认值 | 说明 |
83
+ | ------------ | ------- | ------------------ | ----------------------------------------------------------------------------- |
84
+ | show | Boolean | false | 是否显示验证码弹框 |
85
+ | canvasWidth | Number | 310 | 主图区域的宽度,单位 px |
86
+ | canvasHeight | Number | 160 | 主图区域的高度,单位 px |
87
+ | puzzleScale | Number | 1 | 拼图块的大小比例,0.2 ~ 2 ,数字越大,拼图越大 |
88
+ | sliderSize | Number | 50 | 左下角用户拖动的那个滑块的尺寸,单位 px |
89
+ | range | Number | 10 | 判断成功的误差范围,单位 px, 滑动的距离和拼图的距离小于等于此值时,会判定重合 |
90
+ | imgs | Array | null | 自定义图片,见下方例子 |
91
+ | successText | String | "验证通过!" | 验证成功时的提示文字 |
92
+ | failText | String | "验证失败,请重试" | 验证失败时的提示文字 |
93
+ | sliderText | String | "拖动滑块完成拼图" | 下方滑动条里的文字 |
94
94
95
95
### 事件
96
- | 事件名 | 返回值 | 说明 |
97
- | --------- | ------ | ------------------------------------------------------------ |
98
- | success | 偏差值 | 验证通过时会触发,返回值是用户移动的距离跟目标距离的偏差值px |
99
- | fail | 偏差值 | 验证失败时会触发,返回值同上 |
100
- | close | null | 用户点击遮罩层的回调 |
96
+
97
+ | 事件名 | 返回值 | 说明 |
98
+ | ------- | ------ | ------------------------------------------------------------- |
99
+ | success | 偏差值 | 验证通过时会触发,返回值是用户移动的距离跟目标距离的偏差值 px |
100
+ | fail | 偏差值 | 验证失败时会触发,返回值同上 |
101
+ | close | null | 用户点击遮罩层的回调 |
101
102
102
103
### 自定义图片
103
104
@@ -107,23 +108,24 @@ import Vcode from "vue-puzzle-vcode";
107
108
</template>
108
109
109
110
<script>
110
- import Img1 from ' ~/assets/img1.png' ;
111
- import Img2 from ' ~/assets/img2.png' ;
111
+ import Img1 from " ~/assets/img1.png" ;
112
+ import Img2 from " ~/assets/img2.png" ;
112
113
113
114
export default {
114
- data(){
115
+ data() {
115
116
return {
116
117
Img1,
117
- Img2
118
- }
119
- }
120
- }
118
+ Img2,
119
+ };
120
+ },
121
+ };
121
122
</script>
122
123
```
123
- * 也可以是网络图片完整URL路径,但注意图片跨域问题,因为canvas api无法调用跨域的图片
124
124
125
+ - 也可以是网络图片完整 URL 路径,但注意图片跨域问题,因为 canvas api 无法调用跨
126
+ 域的图片
125
127
126
128
### 说明
127
129
128
- * 当不传递imgs字段或图片加载出错时 ,会自动生成随机图片
129
- * 模态框的显示和隐藏完全由父级控制,所以用户通过验证后,需要手动隐藏模态框
130
+ - 当不传递 imgs 字段或图片加载出错时 ,会自动生成随机图片
131
+ - 模态框的显示和隐藏完全由父级控制,所以用户通过验证后,需要手动隐藏模态框
0 commit comments