vue2的写法，vue3项目改写成ts写法即可

首先验证码随机图片组件；放在适当的文件中，后面引入到主页面

<template><div class="s-canvas"><canvasid="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>

主页面，也就是登录页，在这里引入组件

<template><div class="wrapper"><el-row :gutter="20"><el-col :span="16"><el-input v-model="ruleForm.code" placeholder="请输入验证码"></el-input></el-col><el-col :span="8" style="margin-top: 8px"><span @click="refreshCode" style="cursor: pointer; margin-top: 10px"><s-identify :identifyCode="identifyCode"></s-identify></span><span><el-button @click="refreshCode">切换验证码</el-button></span></el-col></el-row><el-button @click="wwww">点我提交</el-button></div>
</template><script>
import SIdentify from "@/components/identify.vue";export default {name: "Login",components: { SIdentify },data() {return {// 图片验证码identifyCode: "",// 验证码规则identifyCodes: "3456789ABCDEFGHGKMNPQRSTUVWXY",ruleForm: {code: "",},};},mounted() {//进入页面则刷新验证码图片this.refreshCode();},methods: {// 切换验证码refreshCode() {this.identifyCode = "";this.makeCode(this.identifyCodes, 4);},wwww() {//不区分大小写，全部转为大写后比较，全等通过后执行登录if (this.ruleForm.code.toUpperCase() === this.identifyCode.toUpperCase()) {//登录逻辑console.log("this.ruleForm", this.ruleForm.code);console.log("identifyCode", this.identifyCode);} else {this.$message({message: "请输入正确的验证码！！！",type: "warning",});// 如果输入的验证码不对，那么就在警告后，切换成新的验证码this.refreshCode();}},// 生成随机验证码makeCode(o, l) {for (let i = 0; i < l; i++) {this.identifyCode +=this.identifyCodes[Math.floor(Math.random() * this.identifyCodes.length)];}},},
};
</script>

根据需求再更改代码即可