在写登录页的时候有的系统会让你也进行一下验证码绘制，那么验证码如何实现的呢？我在写登录页的时候通过将登录框，验证码分开页面来写，最后将它们变成标签来导入到我的样式页面中，这样写不仅方便，更容易修改代码，很便捷。
也就是说我登录页的样式，输入框，验证码是分别写了三个页面。
然后将验证码绘制的图形，通过组件的形式放入输入框的页面中。
import Identify from '../component/code.vue'; //引用验证码组件<!-- 验证码组件 -->
<el-col :span="8">
<div class="change-email">
<Identify :identifyCode="identifyCode" :changeCode="changeCode"></Identify>
<!-- 引用验证码组件 -->
</div>
</el-col>然后下面这里是验证码的逻辑，比如验证码的初始值或者它的生成范围，可以只生成数字或者字母
// 验证码逻辑
const identifyCode = ref('1234'); // 验证码的初始值
const identifyCodes = '1234567890abcdefghijklmnopqrstuvwxyz'; // 验证码生成范围
// 生成验证码的方法
const changeCode = () => {
identifyCode.value = ''; // 清空当前验证码
makeCode(identifyCodes, 4); // 重新生成新的验证码
};
// 生成随机数字
const randomNum = (min: any, max: any) => {
max = max + 1; // 最大值加1，使得能够取到最大值
return Math.floor(Math.random() * (max - min) + min); // 返回一个在[min, max]范围内的随机数
};
// 根据给定的字符集和长度生成验证码
const makeCode = (data: any, len: any) => {
for (let i = 0; i < len; i++) {
identifyCode.value += data[randomNum(0, data.length - 1)]; // 从字符集中随机取字符拼接成验证码
}
};
onMounted(() => {
changeCode(); // 组件挂载时，生成验证码
});然后changeCode就是每次触发验证码的事件，它都会重新生成一个新的验证码，当然如果在输入验证码错误的时候就需要调用这个验证码重新生成。
最主要的就是这一生成验证码的部分，直接复制就可以，它是通过canvas来进行绘制的
<template>
<!-- 二维码识别组件容器，包含一个 canvas 元素用于绘制验证码 -->
<div class="s-canvas">
<!-- canvas 元素，用于绘制验证码图案 -->
<canvas @click="changeCode" class="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
</div>
</template>
<script>
export default {
name: 'Identify', // 组件名称
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: 100
},
contentHeight: { // 验证码画布高度
type: Number,
default: 40
},
changeCode: { // 切换验证码的事件函数
type: Function
}
},
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.getElementsByClassName('s-canvas'); // 获取所有 canvas 元素
let ctx = canvas[1].getContext('2d'); // 获取第一个 canvas 的上下文
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)
// 为其他 canvas 元素绘制同样的验证码图案（如果存在的话）
if (canvas[3]) {
let ctx1 = canvas[3].getContext('2d');
ctx1.textBaseline = 'bottom'
ctx1.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
ctx1.fillRect(0, 0, this.contentWidth, this.contentHeight)
for (let i = 0; i < this.identifyCode.length; i++) {
this.drawText(ctx1, this.identifyCode[i], i)
}
this.drawLine(ctx1)
this.drawDot(ctx1)
}
if (canvas[5]) {
let ctx2 = canvas[5].getContext('2d');
ctx2.textBaseline = 'bottom'
ctx2.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
ctx2.fillRect(0, 0, this.contentWidth, this.contentHeight)
for (let i = 0; i < this.identifyCode.length; i++) {
this.drawText(ctx2, this.identifyCode[i], i)
}
this.drawLine(ctx2)
this.drawDot(ctx2)
}
},
// 绘制文字
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)) // 计算字符的 x 坐标
let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5) // 计算字符的 y 坐标
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>
<style scoped>
/* canvas 容器样式 */
.s-canvas {
margin-left: 10px; /* 设置左边距 */
display: flex; /* 使用 flex 布局 */
align-items: center; /* 垂直居中对齐 */
cursor: pointer; /* 鼠标悬浮时显示为可点击 */
}
/* 可选的验证码提示文字样式 */
.s-canvas-tip {
color: #5C7099; /* 设置提示文字的颜色 */
font-size: 14px; /* 设置字体大小 */
margin-left: 14px; /* 设置左边距 */
cursor: pointer; /* 鼠标悬浮时显示为可点击 */
}
</style>但是生成验证码的书写格式并不是vue3中的，因为我不是通过setup直接写，是通过export来进行导出。
