vue 使用 vue2-verify 实现图形验证码
最编程
2024-03-13 13:21:34
...
一、介绍
vue2-verify的一款纯前端验证码组件,该项目基于https://github.com/Hibear/verify,验证支持如下类型:
- 常规验证码
picture
常规的验证码由数字和字母构成,输入不区分大小写,可变形成汉字验证。 - 运算验证码
compute
运算验证码主要通过给出数字的加减乘运算,填写运算结果进行验证。 - 滑动验证码
slide
通过简单的滑动即可完成验证,应用与移动端体验很好。 - 拼图验证码
puzzle
拼图。 - 选字验证码
pick
通过按顺序点选图中的汉字完成验证,ie浏览器要求9或以上。
二、官方地址
Github:https://github.com/mizuka-wu/vue2-verify
三、使用方法
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两个参数,分别代表滑动条的宽度和高度,支持百分比方式设置,如: |
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两个参数,分别代表滑动条的宽度和高度,支持百分比方式设置,如: |
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两个参数,分别代表滑动条的宽度和高度,支持百分比方式设置,如: |
showButton | 是否显示确定按钮,默认为true |
原文地址:https://www.cnblogs.com/yangyezhuang/p/17185175.html
推荐阅读
-
Vue 使用 print-js 实现打印功能
-
使用 Tornado 实现网络聊天室(前端使用 vue+bootstrap)
-
如何使用 vue 和 Element-plus 实现上传和下载文件功能
-
什么是可用性测试?有效性(Effectiveness)-- 用户完成特定任务和实现特定目标的正确性和完整性程度;效率(Efficiency)-- 用户完成任务的正确性和完整性程度与所用资源(如时间)之比;满意度(Satisfaction)-- 用户在使用产品时的主观满意度和接受程度。 2.如何获得可用性? 可以参考以下原则:Gould、Boies 和 Lewis(1991 年)为以用户为中心的设计定义了 4 个重要原则: 早期以用户为中心:设计者应在设计过程的早期就努力了解用户的需求。 综合设计:设计的所有方面都应同步发展,而不是按顺序进行。使产品的内部设计始终与用户界面的需求保持一致。 早期和持续测试:当今唯一可行的软件测试方法是经验主义方法,即如果实际用户认为设计可行,该设计就是可行的。通过在整个开发过程中引入可用性测试,用户就有机会在产品推出之前对设计提出反馈意见。 迭代设计:大问题往往掩盖了小问题的存在。设计人员和开发人员应在整个测试过程中对设计进行迭代。 3...什么是可用性测试? 可用性测试是根据可用性标准对图形用户界面进行的系统评估。 可用性测试是衡量用户与系统(网站、软件应用程序、移动技术或任何用户操作设备)交互时的体验质量。4.如何进行可用性测试? l 实验室实验
-
使用 Vue 实现具有 "非常丝滑 "阿尔法索引滑动方向的地址簿
-
vue 使用 postcss-pxtorem 实现电脑或手机自适应
-
vue3+vant3 使用 van-sidebar 侧导航组件实现菜单左右联动效果
-
vue 实现地图应用程序的开发(使用 Gaode map JS API)
-
如何使用 Vue3 实现浮动元素拖放功能
-
如何使用 Vue 实现模仿微信语音信息的效果