一、验证码组件

<template><div class="s-draw"><canvas id="s-draw" :width="contentWidth" :height="contentHeight"></canvas></div>
</template>
<script>
export default {name: 'SIdentify',props: {identifyCode: {type: String,default: '1234',},fontSizeMin: {type: Number,default: 25,},fontSizeMax: {type: Number,default: 30,},backgroundColorMin: {type: Number,default: 255,},backgroundColorMax: {type: Number,default: 255,},colorMin: {type: Number,default: 0,},colorMax: {type: Number,default: 160,},lineColorMin: {type: Number,default: 100,},lineColorMax: {type: Number,default: 255,},dotColorMin: {type: Number,default: 0,},dotColorMax: {type: Number,default: 255,},contentWidth: {type: Number,default: 132,},contentHeight: {type: Number,default: 31,},},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-draw')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)},},watch: {identifyCode() {this.drawPic()},},mounted() {this.drawPic()},
}
</script>
<style scoped>
.s-draw {height: 38px;
}
.s-draw canvas {margin-top: 5px;margin-left: 8px;
}
</style>

二、父组件注册、使用

<template><Form ref="loginForm" :model="form" :rules="rules"><FormItem prop="userName"><Input v-model="form.userName" placeholder="请输入用户名"/></FormItem><FormItem prop="password"><Input type="password" v-model="form.password" placeholder="请输入密码"/></FormItem><FormItem><div style="display:flex" id="atilposition"><Inputtype="text"ref="inputCode"v-model="inputCode"style="width:175px"placeholder="请输入验证码"clearable></Input><span @click="createCode" id="spancode"><Sldentify :identifyCode="code"></Sldentify></span></div><Button :loading="form.loading" @click="handleSubmit" type="primary"  long class="bottom-size">立即登录</Button></FormItem></Form>
</template>
import Sldentify from './SIdentify'components:{Sldentify},data () {return {code:'',inputCode:'',form: {userName: '',password: '',loading: false}}},methods: {createCode() {let text = "";let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";// 设置验证码长度，for( let i=0; i < 4; i++ ){text += possible.charAt(Math.floor(Math.random() * possible.length));}this.code = text},handleSubmit () {this.form.loading = truethis.$refs.loginForm.validate((valid) => {if (valid) {if(this.inputCode == ''){this.$Message.error('请输入验证码')return}if(this.inputCode.toLowerCase() != this.code.toLowerCase()){this.$Message.error('验证码错误')this.inputCode = ''this.createCode()return}this.$emit('on-success-valid', {userName: this.form.userName,password: this.form.password})} else {this.form.loading = false}})}
},
mounted(){
this.createCode()
},

成果：