vue实现图形验证码登录

2023-03-15 04:10| 来源: 网络整理| 查看: 265

本文实例为大家分享了vue实现图形验证码登录的具体代码，供大家参考，具体内容如下

1、效果图

2、在components下面新建文件identify.vue，内容：

export default { name: 'SIdentify', props: { identifyCode: { type: String, default: '1234' }, 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: 112 }, contentHeight: { type: Number, default: 40 } }, methods: { // 生成一个随机数 randomNum (min, max) { return Math.floor(Math.random() * (max - min) + min) }, // 生成一个随机的颜色 randomColor (min, max) { var r = this.randomNum(min, max) var g = this.randomNum(min, max) var b = this.randomNum(min, max) return 'rgb(' + r + ',' + g + ',' + b + ')' }, drawPic () { var canvas = document.getElementById('s-canvas') var 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' var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5) var 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() } } .s-canvas { height: 38px; } .s-canvas canvas{ margin-top: 1px; margin-left: 8px; }

3、页面引入

import SIdentify from '../../components/identify' export default { components: { SIdentify } } data() { // 验证码自定义验证规则 const validateVerifycode = (rule, value, callback) => { const newVal = value.toLowerCase() const identifyStr = this.identifyCode.toLowerCase() if (newVal === '') { callback(new Error('请输入验证码')) } else if (newVal !== identifyStr) { console.log('validateVerifycode:', value) callback(new Error('验证码不正确!')) } else { callback() } } return { identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY', identifyCode: '', ruleForm: { userName: '', password: '', verifycode: '' }, rules: { verifycode: [ { required: true, trigger: 'blur', validator: validateVerifycode } ] } } }

4、html

5、mounted

mounted() { // 验证码初始化 this.identifyCode = '' this.makeCode(this.identifyCodes, 4) }

6、methods

methods: { // 生成随机数 randomNum(min, max) { return Math.floor(Math.random() * (max - min) + min) }, // 切换验证码 refreshCode() { this.identifyCode = '' this.makeCode(this.identifyCodes, 4) }, // 生成四位随机验证码 makeCode(o, l) { for (let i = 0; i < l; i++) { this.identifyCode += this.identifyCodes[ this.randomNum(0, this.identifyCodes.length) ] } } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:Vue 实现登录界面验证码功能vue实现登录页面的验证码以及验证过程解析(面向新手)vue实现短信验证码登录功能（流程详解）Vue实现手机号、验证码登录（60s禁用倒计时）vue实现登录验证码vue实现登录时的图片验证码vue+springboot实现登录验证码vue实现登录时图形验证码用vue实现注册页效果 vue实现短信验证码登录vue实现web前端登录页数字验证码

【本文地址】

公司简介

联系我们