前端做验证码的感觉其实不是很大,现在也用不上,所以继续下去的动力了,希望有人可以正常接手
基于https://github.com/Hibear/verify的验证码项目
项目验证码类型请查看
支持的验证码类型
- 经常验证码图片经常的验证由数字和构成,用户输入不验证大小,生成字符。
- 验证计算结果通过提供的主要加减码验证码,重新填写结果进行。
- 滑动验证码可以通过简单的滑动与滑动完成验证,应用移动端体验非常好。
- 拼图验证码拼图。
- 选字验证码通过按顺序点选图要求的汉字完成验证,即浏览器9或以上。
请记住一个事情!
原来是可以被别人偷偷验证的!
去做
- 添加在线演示和修改
文档
如何使用
npm i vue2-verify
事件
参数 | 说明 |
---|
ready | 验证码初始化成功的功能。 |
success | 验证码成功后的成功函数。如要重新初始化:success:function(obj){obj.refresh();}。 |
error | 验证码匹配失败后的功能。 |
经常验证码图片
参数说明
参数 | 说明 |
---|
type | 验证码类型为图片或1 |
width | 经常验证码的宽度,支持形式设置,例如:width:100%。 |
height | 验证码的高,通常支持形式设置,例如:height:10%。 |
fontSize | 经常验证中码和数字的字体大小,默认为30px。 |
codeLength | 经常验证码中显示的验证码个数,默认为6。 |
验证码计算
参数说明
参数 | 说明 |
---|
type | 验证码类型为计算或2 |
figure | 如果要同时设置三个曝光,则设置数字:1000。 |
arith | 算法选择,支持加、减、乘。设置为1至3分别代表加减乘,0为随时切换。。 |
width | 设置验证码的宽度,常用形式设置,例如:width:100%。 |
height | 设置验证码的高,常见的支持形式,例如:height:10%。 |
fontSize | 用于验证码中的数字的字体大小,默认为 30px。 |
showButton | 是否显示确定按钮,默认为真 |
验证码slide
参数说明
参数 | 说明 |
---|
type | 验证码类型为幻灯片或3 |
vOffset | 精度校验码的量,如:精度为5px,设置vOffset:5。 |
explain | 滑动条内的提示,不设置默认为:滑动滑动完成验证。 |
barSize | 其中包含了哪些参数,分别表示支持宽度、高度的宽度和高度,例如其他几种设置,{width:’100%’,height:’40px’} |
showButton | 是否显示确定按钮,默认为真 |
拼图验证码拼图
参数说明
参数 | 说明 |
---|
type | 验证码类型为拼图或者4 |
mode | 的显示方式,弹出式验证弹出,固定固定,默认码是:mode : ‘fixed’。 |
vOffset | 如完成验证码的编码量默认单位为 px。如:5,设置量为 5px,精确验证:5,设置量为 5px。 |
vSpace | 验证单位图片和移动条容器的间隔,默认为px。如:间隔为5px,设置vSpace:5。 |
explain | 滑动条内的提示,不设置默认为:’向滑动完成验证’。 |
imgUrl | 背景图片的地址,不设置默认为:’images/’。 |
imgName | 验证背景图的集合,默认从图像目录中的代码进行读取,如 [‘1.jpg’, ‘2.jpg’]。 |
imgSize | 其中包含了width、height参数,分别代表图片的宽度和高度,支持各种设置方式,例如:{width:’100%’height:’200px’}。 |
blockSize | 其中包含了width、height两个参数,分别代表拼图块的宽度和高度,如:{width:’40px’,height:’40px’}。 |
barSize | 其中包含了哪些参数,分别表示支持宽度、高度的宽度和高度,如其他设置,其他方式,:{width:’100%’,height:’40px’} |
showButton | 是否显示确定按钮,默认为真 |
选字验证码pick
参数说明
参数 | 说明 |
---|
type | 验证码类型为pick或者5 |
mode | 的显示方式,弹出式验证弹出,固定固定,默认码是:mode : ‘fixed’。 |
defaultNum | 验证码中出现的文字数量,如需默认4个字 |
checkNum | 验证中要求比对的文字数量,如要按序码比对2个字 |
vSpace | 验证单位码图片和移动条容器的间隔,默认为px。 |
imgUrl | 背景图片的地址,不设置默认为:’images/’。 |
imgName | 验证背景图的集合,默认从图像目录中的代码进行读取,如 [‘1.jpg’, ‘2.jpg’]。 |
imgSize | 其中包含了width、height参数,分别代表图片的宽度和高度,支持各种设置方式,例如:{width:’100%’height:’200px’}。 |
barSize | 其中包含了哪些参数,分别表示支持宽度、高度的宽度和高度,如其他设置,其他方式,:{width:’100%’,height:’40px’} |
showButton | 是否显示确定按钮,默认为真 |
// 基础用例
<template>
<Verify @success="alert('success')" @error="alert('error')" :type="1"></Verify>
</template>
<script>
import Verify from 'vue2-verify'
export default {
name: 'app',
methods: {
alert(text) {
console.log(text)
}
},
components: {
Verify
}
}
</script>