vue前端实现验证码登录功能
作者:小白yaye
这篇文章主要介绍了vue前端实现验证码登录功能,登录时图形验证通过三种方法结合实例代码给大家讲解的非常详细, 通过实例代码介绍了vue登录时图形验证码功能的实现,感兴趣的朋友一起看看吧
登录时图形验证
方法一:插件(vue移动端(PC端)图形验证码)
vue移动端(PC端)图形验证码
vue2-verify
地址:vue2-verify的npmjs地址
安装使用:
npm i vue2-verify
支持的验证码类型:
- 常规验证码picture 常规的验证码由数字和字母构成,用户输入不区分大小写,可变形成汉字验证。
- 运算验证码compute 运算验证码主要通过给出数字的加减乘运算,填写运算结果进行验证。
- 滑动验证码slide 通过简单的滑动即可完成验证,应用与移动端体验很好。
- 拼图验证码puzzle 拼图。
- 选字验证码pick 通过按顺序点选图中的汉字完成验证,ie浏览器要求9或以上。
方法二:插件(一款拼图验证码)
slide-verify(图片建议传、不传的话默认图片加载非常慢)
安装使用:
npm install --save vue-monoplasty-slide-verify
地址:
方法三:页面实例(点击图案可以切换字符)
vue实现登录时图形验证码
1.新建 Identify.vue 组件
<template> <div> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script> export default { name: "identify", props: { identifyCode: { type: String, default: '' }, fontSizeMin: { type: Number, default: 28 }, fontSizeMax: { type: Number, default: 40 }, backgroundColorMin: { type: Number, default: 180 }, backgroundColorMax: { type: Number, default: 240 }, colorMin: { type: Number, default: 50 }, colorMax: { type: Number, default: 160 }, lineColorMin: { type: Number, default: 40 }, lineColorMax: { type: Number, default: 180 }, dotColorMin: { type: Number, default: 0 }, dotColorMax: { type: Number, default: 255 }, contentWidth: { type: Number, default: 130 }, contentHeight: { type: Number, default: 40 } }, methods:{ // 生成一个随机数 randomNum (min, max) { return Math.floor(Math.random() * (max - min) + min) }, // 生成一个随机的颜色 randomColor (min, max) { let r = this.randomNum(min, max) let g = this.randomNum(min, max) let b = this.randomNum(min, max) return 'rgb(' + r + ',' + g + ',' + b + ')' }, drawPic () { let canvas = document.getElementById('s-canvas') let ctx = canvas.getContext('2d') ctx.textBaseline = 'bottom' // 绘制背景 ctx.fillStyle = this.randomColor( this.backgroundColorMin, this.backgroundColorMax ) ctx.fillRect(0, 0, this.contentWidth, this.contentHeight) // 绘制文字 for (let i = 0; i < this.identifyCode.length; i++) { this.drawText(ctx, this.identifyCode[i], i) } this.drawLine(ctx) this.drawDot(ctx) }, drawText (ctx, txt, i) { ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax) ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5) let deg = this.randomNum(-30, 30) // 修改坐标原点和旋转角度 ctx.translate(x, y) ctx.rotate(deg * Math.PI / 270) ctx.fillText(txt, 0, 0) // 恢复坐标原点和旋转角度 ctx.rotate(-deg * Math.PI / 270) ctx.translate(-x, -y) }, drawLine (ctx) { // 绘制干扰线 for (let i = 0; i < 2; i++) { ctx.strokeStyle = this.randomColor( this.lineColorMin, this.lineColorMax ) ctx.beginPath() ctx.moveTo( this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight) ) ctx.lineTo( this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight) ) ctx.stroke() } }, drawDot (ctx) { // 绘制干扰点 for (let i = 0; i < 20; i++) { ctx.fillStyle = this.randomColor(0, 255) ctx.beginPath() ctx.arc( this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI ) ctx.fill() } } }, watch: { identifyCode () { this.drawPic() } }, mounted () { this.drawPic() } } </script> <style lang="scss" scoped> #s-canvas { height: 38px; } </style>
2.在父组件 index.vue注册使用
<template> <div @click="refreshCode" style="cursor: pointer;"> <Identify :identifyCode="identifyCode" ></Identify> </div> </template> <script> import Identify from '@/components/test/identify' export default { name: "index", components:{ Identify }, data(){ return { identifyCode: '', // 验证码规则 identifyCodes: '123456789ABCDEFGHGKMNPQRSTUVWXYZ', } }, methods:{ // 切换验证码 refreshCode() { this.identifyCode = '' this.makeCode(this.identifyCodes, 4) console.log(this.identifyCode) }, // 生成随机验证码 makeCode(o, l) { for (let i = 0; i<l; i++) { this.identifyCode += this.identifyCodes[ Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0) ] } }, mounted() { this.refreshCode() } } </script> <style scoped> </style>
到此这篇关于vue前端实现登录时加验证码的文章就介绍到这了,更多相关vue验证码登录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!