本文实例为大家分享了vue实现web前端登录页数字验证码的具体代码,供大家参考,具体内容如下
1.创建code.js文件夹下面是js代码
function gverify(options) { console.log(); // 创建一个图形验证码对象,接收options对象为参数 this.con = document.getelementbyid(options) this.options = { // 默认options参数值 id: '', // 容器id canvasid: 'verifycanvas', // canvas的id width: this.con.offsetwidth, // 默认canvas宽度 height: this.con.offsetheight, // 默认canvas高度 type: 'number', // 图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母 code: '' } if (object.prototype.tostring.call(options) === '[object object]') { // 判断传入参数类型 for (var i in options) { // 根据传入的参数,修改默认参数值 this.options[i] = options[i] } } else { this.options.id = options } this.options.numarr = '0,1,2,3,4,5,6,7,8,9'.split(',') this.options.letterarr = getallletter() this._init() this.refresh() } gverify.prototype = { /** 版本号**/ version: '1.0.0', /** 初始化方法**/ _init: function () { var canvas = document.createelement('canvas') canvas.id = this.options.canvasid let { width, height } = this.options canvas.width = width canvas.height = height canvas.style.cursor = 'pointer' canvas.innerhtml = '您的浏览器版本不支持canvas' this.con.appendchild(canvas) var parent = this canvas.onclick = function () { parent.refresh() } }, /** 生成验证码**/ refresh: function () { var canvas = document.getelementbyid(this.options.canvasid) if (canvas.getcontext) { var ctx = canvas.getcontext('2d') } ctx.textbaseline = 'middle' ctx.fillstyle = randomcolor(180, 240) ctx.fillrect(0, 0, this.options.width, this.options.height) if (this.options.type === 'blend') { // 判断验证码类型 var txtarr = this.options.numarr.concat(this.options.letterarr) } else if (this.options.type === 'number') { var txtarr = this.options.numarr } else { var txtarr = this.options.letterarr } this.options.code = '' for (var i = 1; i <= 4; i++) { var txt = txtarr[randomnum(0, txtarr.length)] this.options.code += txt ctx.font = randomnum(this.options.height / 2, this.options.height) + 'px simhei' // 随机生成字体大小 ctx.fillstyle = randomcolor(50, 160) // 随机生成字体颜色 ctx.shadowoffsetx = randomnum(-3, 3) ctx.shadowoffsety = randomnum(-3, 3) ctx.shadowblur = randomnum(-3, 3) ctx.shadowcolor = 'rgba(0, 0, 0, 0.3)' var x = this.options.width / 5 * i var y = this.options.height / 2 var deg = randomnum(-30, 30) /** 设置旋转角度和坐标原点**/ ctx.translate(x, y) ctx.rotate(deg * math.pi / 180) ctx.filltext(txt, 0, 0) /** 恢复旋转角度和坐标原点**/ ctx.rotate(-deg * math.pi / 180) ctx.translate(-x, -y) } /** 绘制干扰线**/ for (var i = 0; i < 4; i++) { ctx.strokestyle = randomcolor(40, 180) ctx.beginpath() ctx.moveto(randomnum(0, this.options.width), randomnum(0, this.options.height)) ctx.lineto(randomnum(0, this.options.width), randomnum(0, this.options.height)) ctx.stroke() } /** 绘制干扰点**/ for (var i = 0; i < this.options.width / 4; i++) { ctx.fillstyle = randomcolor(0, 255) ctx.beginpath() ctx.arc(randomnum(0, this.options.width), randomnum(0, this.options.height), 1, 0, 2 * math.pi) ctx.fill() } }, /** 验证验证码**/ validate: function (code) { var code = code.tolowercase() var v_code = this.options.code.tolowercase() if (code == v_code) { return true } else { return false } } } /** 生成字母数组**/ function getallletter() { var letterstr = 'a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z' return letterstr.split(',') } /** 生成一个随机数**/ function randomnum(min, max) { return math.floor(math.random() * (max - min) + min) } /** 生成一个随机色**/ function randomcolor(min, max) { var r = randomnum(min, max) var g = randomnum(min, max) var b = randomnum(min, max) return 'rgb(' + r + ',' + g + ',' + b + ')' } export { gverify }
2.code.js在组件中引入
3.在data中定义如下两个属性
value:"", verifycode: "",
4.在mounted中执行方法
mounted(){ this.verifycode = new gverify("auth_code"); },
5.在template中定义div需要给div设置宽高
<div id="auth_code"></div>
6.在登录请求前进行判断成功向下执行,失败return并同时执行this.verifycode.refresh()方法切换验证码,同时按照逻辑 在登录失败账号或密码错误时也需要执行this.verifycode.refresh()切换验证码
if(this.verifycode.validate(this.value)){ }else{ this.$message({ message: "验证码错误", type: 'warning' }); this.verifycode.refresh(); return }
7.效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。