📓最近想实现使用vue3实现一个简易的前端验证码校验的功能，就花了点时间实现了，这只是一个简易版的，但是用在项目中是没有啥问题的，废话不多说，先来看下最终实现的效果。
📓现在让我们来一步一步的实现就行，先把代码贴出来
<template> <div> <div class="box"> <div> <span>输入验证码:</span><el-input class="input" v-model="numberinput"></el-input> </div> <div class="rendombox"> <div class="rendom" ref="rendom">{{ numberrandom }}</div> <div class="rendomimg rendom"> <img :src="imageData"> </div> </div> <el-button style="height: 40px;" @click="refresh">刷新</el-button> <el-button style="height: 40px;" @click="login">登录</el-button> </div> </div> </template> <script lang="ts"> import { nextTick, onMounted, ref, watch } from 'vue' import html2canvas from 'html2canvas' export default ({ setup() { let numberrandom = ref() let numberinput = ref() let imageData = ref() const rendom: any = ref() const canvas = (data: any) => { nextTick(() => { html2canvas(data).then(canvas => { imageData.value = canvas.toDataURL('image/png'); }); }) } const random = () => { numberrandom.value = Math.floor(Math.random() * 10000) % 10000 } random() const refresh = async () => { random() canvas(rendom.value) console.log(rendom.value, 1) } const login = () => { if (numberinput.value == numberrandom.value) { alert("验证通过，在这里写登录成功的代码") } else { alert("登录失败，在这里写登录失败后的代码") } } onMounted(() => { canvas(rendom.value) }) return { numberrandom, random, numberinput, login, rendom, imageData, refresh } }, }) </script> <style> @font-face { font-family: "christmas"; src: url("../ttf/Christmas_Wonderful.ttf"); } .box { display: flex; flex-direction: row } .input { width: 120px; height: 40px; margin-right: 20px; } .rendom { font-family: "christmas", sans-serif; border: 0.5px solid #ccc; line-height: 50px; width: 100px; text-align: center; height: 38px; font-size: 50px; margin-right: 20px; background-color: #F1F1F5; /*背景色*/ background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(0deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%); /*rgba(0, 0, 0, 0)，transparent全透明黑*/ background-size: 40px 10px; /*调节格子宽 高*/ } .rendombox { position:relative; } .rendomimg { position:absolute; top: 0; left: 0; } .rendomimg>img{ width:100px; height:38px; } </style>
📓按照下方的步骤来
1，基本的页面样式
📓基本的样式我这里就不多说了，就正常的样式即可，主要的还是验证码方面。
2，生成随机数
2.1 验证码都是随机数，我们这里需要前端生成随机数，然后将随机数放在页面上，这里我使用了一个div来放置随机数。代码如下
let numberrandom = ref() const random = () => { numberrandom.value = Math.floor(Math.random() * 10000) % 10000 }
2.2 同时还需要将生成随机数函数放在钩子函数onmounted里执行，保证每次进入到这个页面时都能生成这个函数
onMounted(() => { random() })
2.3 将随机数渲染到页面上去
<div class="rendom"><span>{{ numberrandom }}</span></div>
3.字体处理
📓我们看到的验证码都是一些艺术字，所以这里我们也需要对验证码多艺术字处理，我们首先找到字体文件，这个一般在一些字体下载网上能找到，ttf格式的文件，我们在src下新建一个文件夹，文件夹里放置我们的ttf的文件，如下图：
📓然后我们在我们放验证码内容的外层加上一层div，给这个div设置一个class名
📓然后我们在style标签里写css样式，并引入我们的字体文件，如下图
📓当我们设置完成后，我们的验证码的文字就变成艺术字啦
4.背景处理
📓除了字体需要做的不容易识别的话，其实我们还需要对验证码的背景进行处理，让他变得更花。
📓这里我直接用了给验证码加了一套格子背景
background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(0deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
5.将我们的验证码变成图片
📓这时候我们的验证码已经基本上做好了 这时候我们就需要在做一件事情，将验证码的div块变成图片，这里我使用html2canvas来进行转换
下载html2canvas
npm install html2canvas --save
使用
import html2canvas from 'html2canvas' html2canvas(data).then(canvas => { imageData.value = canvas.toDataURL('image/png'); });
📓其中 我们给html2canvas传入的参数dta就是我们需要转换为图片的元素的元素对象，一般通过vue的ref来获取这个元素对象，然后将对象传入即可，回调函数里返回一个图片地址，将这个图片地址通过img标签渲染到页面上即可。
📓注意，因为我们将div变成图片是要在获取到元素对象后才执行，所以，转换代码要卸载nextick的的钩子函数里：
nextTick(() => { html2canvas(data).then(canvas => { imageData.value = canvas.toDataURL('image/png'); }); })
📓到了这一步后，我们就能发现页面上显示出了2个验证码的显示框，这时候，我们就需要，将我们的图片的验证码贴到文字验证码上方，这里我使用定位的方式来实现
.rendombox { //外层的div position:relative; } .rendomimg { //图片 position:absolute; top: 0; left: 0; }
📓到现在这一步之后，就基本上实现的验证码的功能，有一点需要注意，我们获取ref的代码要写在nomounted的钩子函数里。
📓随手写的，作一个知识扩展吧 别当真哈
