一、介绍
vue2-verify 是一款基于verify的纯前端验证码组件，项目地址：https://github.com/mizuka-wu/vue2-verify
验证支持如下类型：
picture常规验证码，由数字和字母构成，输入不区分大小写，可变形成汉字验证。compute运算验证码，主要通过给出数字的加减乘运算，填写运算结果进行验证。slide滑动验证码，通过简单的滑动即可完成验证，应用与移动端体验很好。puzzle拼图验证码，拼图。pick选字验证码，通过按顺序点选图中的汉字完成验证，ie浏览器要求9或以上。
二、使用方法
1. 安装
npm i vue2-verify
2. 使用
如果只在某一页面（如登录、注册）使用验证，建议只在该页面引入。如下代码所示。
<template><verify></verify>
</template><script>import Verify from 'vue2-verify'export default {components: {Verify,}}
</script><style scoped></style>
如果什么参数都不设置。vue2-verify默认为常规认证码，如下图所示。
当然这样子就只是一个摆设而已，输入按确定后并没有什么用，因而我们还要设置回调事件，可以设置success和error，分别代表验证码输入成功和输入错误时的回调。
<template><div><verify @success="onVerifySuccess" @error="onVerifyError" ></verify></div>
</template><script>import Verify from 'vue2-verify'export default {components: {Verify,},methods: {onVerifySuccess(obj) {//验证码正确回调console.log('verify success');//todo},onVerifyError(obj) {//验证码错误回调console.log('verify error');//错误刷新验证码obj.refresh();//todo}}}
</script>
此外该组件还提供了数字运输验证、滑动验证等，通过type参数即可改变验证码的类型；
<template><div><div style="display:inline-block"><verify type="1"></verify></div><div style="display:inline-block"><verify type="2"></verify></div><div style="display:inline-block"><verify type="3" :showButton="false"></verify></div><div style="display:inline-block"><verify type="4" :showButton="false"></verify></div><div style="display:inline-block"><verify type="5" :showButton="false"></verify></div></div>
</template>
三、详细文档
事件
| 参数 | 说明 |
|---|---|
| ready | 验证码初始化成功的回调函数。 |
| success | 验证码匹配成功后的回调函数。如要重新初始化：success:function(obj){obj.refresh();}。 |
| error | 验证码匹配失败后的回调函数。 |
常规验证码picture
参数说明
| 参数 | 说明 |
|---|---|
| type | 验证码type为picture或者1 |
| width | 常规验证码的宽,支持百分比形式设置，如：width:100%。 |
| height | 常规验证码的高,支持百分比形式设置，如：height:10%。 |
| fontSize | 常规验证码中的字母&数字的字体大小，默认为30px。 |
| codeLength | 常规验证码中显示的验证码个数，默认为6。 |
运算验证码compute
参数说明
| 参数 | 说明 |
|---|---|
| type | 验证码type为compute或者2 |
| figure | 运算验证码的位数,默认是100以内的数字，即两位数。如果是要设置三位数，则设置figure:1000。 |
| arith | 算法选择，支持加、减、乘。设置为1至3分别代表加减乘，0为随机切换。 |
| width | 运算验证码的宽,支持百分比形式设置，如：width:100%。 |
| height | 运算验证码的高,支持百分比形式设置，如：height:10%。 |
| fontSize | 运算验证码中的数字的字体大小，默认为30px。 |
| showButton | 是否显示确定按钮，默认为true |
滑动验证码slide
参数说明
| 参数 | 说明 |
|---|---|
| type | 验证码type为slide或者3 |
| vOffset | 滑动验证码的误差量，如：误差量为5px就能完成验证，设置vOffset:5。 |
| explain | 滑动条内的提示，不设置默认是：向右滑动完成验证。 |
| barSize | 其中包含了width、height两个参数，分别代表滑动条的宽度和高度，支持百分比方式设置，如：{width:‘100%’,height:‘40px’} |
| showButton | 是否显示确定按钮，默认为true |
拼图验证码puzzle
参数说明
| 参数 | 说明 |
|---|---|
| type | 验证码type为puzzle或者4 |
| mode | 验证码的显示方式，弹出式pop，固定fixed，默认是：mode : ‘fixed’。 |
| vOffset | 滑动验证码的误差量，默认单位是px。如：误差量为5px就能完成验证，设置vOffset:5。 |
| vSpace | 验证码图片和移动条容器的间隔，默认单位是px。如：间隔为5px，设置vSpace:5。 |
| explain | 滑动条内的提示，不设置默认是：‘向右滑动完成验证’。 |
| imgUrl | 背景图片的地址，不设置默认是：‘images/’。 |
| imgName | 验证码背景图的数组集合，默认从images目录中进行读取，如 [‘1.jpg’, ‘2.jpg’]。 |
| imgSize | 其中包含了width、height两个参数，分别代表图片的宽度和高度，支持百分比方式设置 如:{width:‘100%’,height:‘200px’}。 |
| blockSize | 其中包含了width、height两个参数，分别代表拼图块的宽度和高度，如:{width:‘40px’,height:‘40px’}。。 |
| barSize | 其中包含了width、height两个参数，分别代表滑动条的宽度和高度，支持百分比方式设置，如:{width:‘100%’,height:‘40px’} |
| showButton | 是否显示确定按钮，默认为true |
选字验证码pick
参数说明
| 参数 | 说明 |
|---|---|
| type | 验证码type为pick或者5 |
| mode | 验证码的显示方式，弹出式pop，固定fixed，默认是：mode : ‘fixed’。 |
| defaultNum | 验证码中出现的文字数量，如要默认4个字 |
| checkNum | 验证码中要求比对的文字数量，如要按序比对2个字 |
| vSpace | 验证码图片和移动条容器的间隔，默认单位是px。 |
| imgUrl | 背景图片的地址，不设置默认是：‘images/’。 |
| imgName | 验证码背景图的数组集合，默认从images目录中进行读取，如 [‘1.jpg’, ‘2.jpg’]。 |
| imgSize | 其中包含了width、height两个参数，分别代表图片的宽度和高度，支持百分比方式设置 如:{width:‘100%’,height:‘200px’}。 |
| barSize | 其中包含了width、height两个参数，分别代表滑动条的宽度和高度，支持百分比方式设置，如:{width:‘100%’,height:‘40px’} |
| showButton | 是否显示确定按钮，默认为true |