Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit d9da706

Browse filesBrowse files
committed
update 1.1.3
1 parent 3843c42 commit d9da706
Copy full SHA for d9da706

File tree

Expand file treeCollapse file tree

6 files changed

+694
-497
lines changed
Filter options
Expand file treeCollapse file tree

6 files changed

+694
-497
lines changed

‎README.md

Copy file name to clipboard
+65-63Lines changed: 65 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
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

1313
2020/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
2830
import 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
113114
export 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+
- 模态框的显示和隐藏完全由父级控制,所以用户通过验证后,需要手动隐藏模态框

‎dist/main.js

Copy file name to clipboardExpand all lines: dist/main.js
+1-1Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Copy file name to clipboardExpand all lines: package.json
+18-13Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
{
22
"name": "vue-puzzle-vcode",
3-
"version": "1.1.2",
3+
"version": "1.1.3",
44
"description": "vue 滑动拼图验证码",
55
"main": "dist/main.js",
6+
"files": [
7+
"dist/"
8+
],
69
"scripts": {
710
"dev": "webpack-dev-server --config webpack.dev.config.js --port 8081",
811
"build": "webpack --config webpack.production.config.js --progress --profile --colors",
@@ -14,7 +17,9 @@
1417
"url": "git+https://github.com/javaLuo/vue-puzzle-vcode.git"
1518
},
1619
"keywords": [
17-
"vue"
20+
"vue",
21+
"puzzle",
22+
"vcode"
1823
],
1924
"author": "L",
2025
"license": "ISC",
@@ -26,32 +31,32 @@
2631
"vue": "^2.6.11"
2732
},
2833
"devDependencies": {
29-
"@babel/core": "^7.9.0",
34+
"@babel/core": "^7.9.6",
3035
"@babel/plugin-proposal-class-properties": "^7.8.3",
31-
"@babel/plugin-proposal-object-rest-spread": "^7.9.0",
36+
"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
3237
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
33-
"@babel/plugin-transform-runtime": "^7.9.0",
38+
"@babel/plugin-transform-runtime": "^7.9.6",
3439
"@babel/polyfill": "^7.8.7",
35-
"@babel/runtime": "^7.9.2",
40+
"@babel/runtime": "^7.9.6",
3641
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
3742
"@vue/babel-preset-jsx": "^1.1.2",
38-
"autoprefixer": "^9.7.4",
43+
"autoprefixer": "^9.7.6",
3944
"babel-loader": "^8.1.0",
4045
"babel-plugin-import": "^1.13.0",
4146
"babel-plugin-transform-decorators-legacy": "^1.3.5",
4247
"babel-preset-vue-app": "^2.0.0",
4348
"clean-webpack-plugin": "^3.0.0",
44-
"css-loader": "^3.4.2",
49+
"css-loader": "^3.5.3",
4550
"file-loader": "^6.0.0",
4651
"less": "^3.11.1",
47-
"less-loader": "^5.0.0",
52+
"less-loader": "^6.0.0",
4853
"postcss-loader": "^3.0.0",
49-
"style-loader": "^1.1.3",
54+
"style-loader": "^1.2.1",
5055
"uglifyjs-webpack-plugin": "^2.2.0",
51-
"url-loader": "^4.0.0",
52-
"vue-loader": "^15.9.1",
56+
"url-loader": "^4.1.0",
57+
"vue-loader": "^15.9.2",
5358
"vue-template-compiler": "^2.6.11",
54-
"webpack": "^4.42.0",
59+
"webpack": "^4.43.0",
5560
"webpack-cli": "^3.3.11",
5661
"webpack-dev-server": "3.10.3"
5762
},

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.