基于https://github.com/Hibear/verify 的验证码项目
项目验证码类型请查看 项目支持PC、移动端
- 常规验证码picture 常规的验证码由数字和字母构成，用户输入不区分大小写，可变形成汉字验证。
- 运算验证码compute 运算验证码主要通过给出数字的加减乘运算，填写运算结果进行验证。
- 滑动验证码slide 通过简单的滑动即可完成验证，应用与移动端体验很好。
- 拼图验证码puzzle 拼图。
- 选字验证码pick 通过按顺序点选图中的汉字完成验证，ie浏览器要求9或以上。
纯前端是可以被别人绕过验证的!
npm i vue-awesome-verify
| 参数 | 说明 |
|---|---|
ready |
验证码初始化成功的回调函数。 |
success |
验证码匹配成功后的回调函数。如要重新初始化：success:function(obj){obj.refresh();}。 |
error |
验证码匹配失败后的回调函数。 |
| 参数 | 说明 |
|---|---|
type |
验证码type为picture或者1 |
width |
常规验证码的宽,支持百分比形式设置，如：width:100%。 |
height |
常规验证码的高,支持百分比形式设置，如：height:10%。 |
fontSize |
常规验证码中的字母&数字的字体大小，默认为30px。 |
codeLength |
常规验证码中显示的验证码个数，默认为6。 |
| 参数 | 说明 |
|---|---|
type |
验证码type为compute或者2 |
figure |
运算验证码的位数,默认是100以内的数字，即两位数。如果是要设置三位数，则设置figure:1000。 |
arith |
算法选择，支持加、减、乘。设置为1至3分别代表加减乘，0为随机切换。。 |
width |
运算验证码的宽,支持百分比形式设置，如：width:100%。 |
height |
运算验证码的高,支持百分比形式设置，如：height:10%。 |
fontSize |
运算验证码中的数字的字体大小，默认为30px。 |
showButton |
是否显示确定按钮，默认为true |
| 参数 | 说明 |
|---|---|
type |
验证码type为slide或者3 |
vOffset |
滑动验证码的误差量，如：误差量为5px就能完成验证，设置vOffset:5。 |
explain |
滑动条内的提示，不设置默认是：向右滑动完成验证。 |
barSize |
其中包含了width、height两个参数，分别代表滑动条的宽度和高度，支持百分比方式设置，如：{width:'100%',height:'40px'} |
| 参数 | 说明 |
|---|---|
type |
验证码type为puzzle或者4 |
vOffset |
滑动验证码的误差量，默认单位是px。如：误差量为5px就能完成验证，设置vOffset:5。 |
vSpace |
验证码图片和移动条容器的间隔，默认单位是px。如：间隔为5px，设置vSpace:5。 |
explain |
滑动条内的提示，不设置默认是：'向右滑动完成验证'。 |
imgSize |
其中包含了width、height两个参数，分别代表图片的宽度和高度，支持百分比方式设置 如:{width:'100%',height:'200px'}。 |
imgsAddress |
图片地址[require('./images/1.jpg'), require('./images/2.jpg'), require('./images/3.jpg')] |
blockSize |
其中包含了width、height两个参数，分别代表拼图块的宽度和高度，如:{width:'40px',height:'40px'}。。 |
barSize |
其中包含了width、height两个参数，分别代表滑动条的宽度和高度，支持百分比方式设置，如:{width:'100%',height:'40px'} |
| 参数 | 说明 |
|---|---|
type |
验证码type为pick或者5 |
mode |
验证码的显示方式，弹出式pop，固定fixed，默认是：mode : 'fixed'。 |
defaultNum |
验证码中出现的文字数量，如要默认4个字 |
checkNum |
验证码中要求比对的文字数量，如要按序比对2个字 |
vSpace |
验证码图片和移动条容器的间隔，默认单位是px。 |
imgsAddress |
图片完成地址[require('./images/1.jpg'), require('./images/2.jpg'), require('./images/3.jpg')] |
imgSize |
其中包含了width、height两个参数，分别代表图片的宽度和高度，支持百分比方式设置 如:{width:'100%',height:'200px'}。 |
barSize |
其中包含了width、height两个参数，分别代表滑动条的宽度和高度，支持百分比方式设置，如:{width:'100%',height:'40px'} |
// 基础用例一
<template>
<vue-awesome-verify :type="4"></vue-awesome-verify>
</template>
<script>
import VueAwesomeVerify from 'vue-awesome-verify'
import 'vue-awesome-verify/dist/vue-awesome-verify.min.css'
Vue.use(vue-awesome-verify)
</script>
// 基础用例二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="dist/vue-awesome-verify.min.js"></script>
<link rel="stylesheet" href="dist/vue-awesome-verify.min.css">
<title>vue-awesome-verify</title>
</head>
<body>
<div id="app">
<vue-awesome-verify type=1></vue-awesome-verify>
</div>
</body>
</html>