11# 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+ 需求来不及弄，为了应付老板，就弄了个纯前端的随便验一下得了。
56
67** DEMO** : https://isluo.com/work/vue-puzzle-vcode/
78
89![ img] ( public/demo.gif )
910
10-
1111## 重要更新
1212
13132020/03/16 v1.1.0 ** 事件名改变** <br />
14+
1415```
1516@onSuccess -> @success
1617@onClose -> @close
1718@onFail -> @fail
1819```
20+
1921### 安装
2022
2123``` node
@@ -27,77 +29,76 @@ Vue 纯前端的拼图人机验证、右滑拼图验证<br/>
2729``` vue
2830import Vcode from "vue-puzzle-vcode";
2931
30- <Vcode
31- :show="isShow"
32- @success="success"
33- @close="close"
34- />
32+ <Vcode :show="isShow" @success="success" @close="close" />
3533```
34+
3635### 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 ` 中有引用，注意自己匹配一下引用路径
4041
4142### 最简单例子
4243
4344``` vue
4445<template>
4546 <div>
46- <Vcode
47- :show="isShow"
48- @success="success"
49- @close="close"
50- />
47+ <Vcode :show="isShow" @success="success" @close="close" />
5148 <button @click="submit">登录</button>
5249 </div>
5350</template>
5451
5552<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;
6266 },
63- components:{
64- Vcode
67+ // 用户通过了验证
68+ success(msg) {
69+ this.isShow = false; // 通过验证后，需要手动隐藏模态框
6570 },
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+ };
8077</script>
8178```
8279
8380### 参数
8481
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 | "拖动滑块完成拼图" | 下方滑动条里的文字 |
9494
9595### 事件
96- | 事件名 | 返回值 | 说明 |
97- | --------- | ------ | ------------------------------------------------------------ |
98- | success | 偏差值 | 验证通过时会触发，返回值是用户移动的距离跟目标距离的偏差值px |
99- | fail | 偏差值 | 验证失败时会触发，返回值同上 |
100- | close | null | 用户点击遮罩层的回调 |
96+
97+ | 事件名 | 返回值 | 说明 |
98+ | ------- | ------ | ------------------------------------------------------------- |
99+ | success | 偏差值 | 验证通过时会触发，返回值是用户移动的距离跟目标距离的偏差值 px |
100+ | fail | 偏差值 | 验证失败时会触发，返回值同上 |
101+ | close | null | 用户点击遮罩层的回调 |
101102
102103### 自定义图片
103104
@@ -107,23 +108,24 @@ import Vcode from "vue-puzzle-vcode";
107108</template>
108109
109110<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" ;
112113
113114export default {
114- data(){
115+ data() {
115116 return {
116117 Img1,
117- Img2
118- }
119- }
120- }
118+ Img2,
119+ };
120+ },
121+ };
121122</script>
122123```
123- * 也可以是网络图片完整URL路径，但注意图片跨域问题，因为canvas api无法调用跨域的图片
124124
125+ - 也可以是网络图片完整 URL 路径，但注意图片跨域问题，因为 canvas api 无法调用跨
126+ 域的图片
125127
126128### 说明
127129
128- * 当不传递imgs字段或图片加载出错时 ，会自动生成随机图片
129- * 模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框
130+ - 当不传递 imgs 字段或图片加载出错时 ，会自动生成随机图片
131+ - 模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框
0 commit comments