当你在页面进行登录时,时不时会遇到各种登录验证问题。例如发短信验证、图形验证码等,今天就来说说图形验证码。
identify是vue的一个插件,网上提供了一个vue插件库(入口)。identify是使用canvas来生成图形验证码,使用起来非常方便,可以直接拿过来注册使用。
1.首先创建一个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: 20 }, fontSizeMax: { type: Number, default: 35 }, 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: 38 } }, 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) var deg = this.randomNum(-45, 45) // 修改坐标原点和旋转角度 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) }, drawLine (ctx) { // 绘制干扰线 for (let i = 0; i < 3; 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 < 30; 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>
里面的参数可以去看具体文档,都有详细解释
2.其次在main.js里面进行注册,这里要特别注意引用路径
import SIdentify from './components/identify' //注意引入路径 Vue.use(SIdentify)
准备工作做好之后,直接步入主题,开始肝。
HTML代码:
<el-form-item label="验证码" prop="sidentify"> <el-input v-model="loginForm.sidentify" style="width: 50%;float: left;" autocomplete="off" placeholder="请输入右侧验证码" /> <div class="coderight" @click="refreshCode"> <SIdentify :identifyCode="identifyCode"></SIdentify> </div> </el-form-item>
效果图:
JS代码:
<script> import SIdentify from "./identify"; export default { name: 'Login', data() { const sidentify = (rule, value, callback) => { let newVal = value.toLowerCase() let identifyStr = this.identifyCode.toLowerCase() if (newVal === '') { callback(new Error('请输入验证码')) } else if (newVal !== identifyStr) { callback(new Error('验证码错误')) } else { callback() } }; return { identifyCodes: '1234567890ABCDEFGHIGKLMNoPQRSTUVWXYZ',//定义随机数范围 identifyCode: '', //验证码 loginForm: { sidentify: '', }, rules: { sidentify: [{ required: true, validator: sidentify, trigger: 'blur' }] }, }; }, components: { SIdentify: SIdentify }, mounted() { this.identifyCode = ""; this.makeCode(this.identifyCodes, 4); }, methods: { // 生成随机数 randomNum(min, max) { return Math.floor(Math.random() * (max - min) + min) }, // 生成四位随机验证码 makeCode(o, l) { for (let i = 0; i < l; i++) { this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)] } }, // 切换验证码 refreshCode() { this.identifyCode = '' this.makeCode(this.identifyCodes, 4) } } } </script>
这边的的表单检验是自己定义的,也可以通过elementUI里面的的写法来实现。
具体效果:
点击验证码图片可以进行切换,具体源码可以私信或者评论。