vue实现图形验证码登录
更新时间:2021年04月27日 11:17:13 作者:爱喝冰可乐
这篇文章主要为大家详细介绍了vue实现图形验证码登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
本文实例为大家分享了vue实现图形验证码登录的具体代码,供大家参考,具体内容如下
1、效果图
2、在components下面新建文件identify.vue,内容:
<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script> 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() } } </script> <style lang='scss' scoped> .s-canvas { height: 38px; } .s-canvas canvas{ margin-top: 1px; margin-left: 8px; } </style>
3、页面引入
<script> 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 } ] } } } </script>
4、html
<el-form-item prop="verifycode"> <div style="display:flex"> <el-input v-model="ruleForm.verifycode" placeholder="请输入验证码" @keyup.enter.native="login('ruleForm')" ></el-input> <span @click="refreshCode" ><s-identify :identifyCode="identifyCode"></s-identify ></span> </div> </el-form-item>
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项目打包后上传至GitHub并实现github-pages的预览
这篇文章主要介绍了vue项目打包后上传至GitHub并实现github-pages的预览,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-05-05Vue?import?from省略后缀/加载文件夹的方法/实例详解
本文介绍Vue在import时省略后缀以及import文件夹的方法,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
最新评论