vue实现登录时的图片验证码
网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要为大家详细介绍了vue实现登录时的图片验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现登录时的图片验证码的具体代码,供大家参考,具体内容如下
效果图
一、新建vue组件ponents/identify/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='less' scoped> .s-canvas { height: 38px; } .s-canvas canvas{ margin-: 1px; margin-left: 8px; } </style>
二、需要地方引入
<template> <span @click="refreshCode" style="cursor: pointer;"> <s-identify :identifyCode="identifyCode" ></s-identify> </span> </template> <script> // 引入图片验证码组件 import SIdentify from '@/ponents/identify' export default { ponents: { SIdentify }, data() { return { // 图片验证码 identifyCode: '', // 验证码规则 identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY', } }, methods: { // 切换验证码 refreshCode() { this.identifyCode = '' this.makeCode(this.identifyCodes, 4) }, // 生成随机验证码 makeCode(o, l) { for (let i = 0; i < l; i++) { this.identifyCode += this.identifyCodes[ Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0) ] } }, } } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程