Vue封装组件实现验证码功能

每天进步一点点... 对于些限制比较低、要求不高的情况下，可以在前端使用验证码做一个简单验证 ```html <template> <div class="code"> <canvas @click="changeCode" id="canvas"></canvas> </div> </template> <script> export default { name: "VerificationCode", props: { //宽 width: { type: Number, default: 100, }, //高 height: { type: Number, default: 35, }, //验证码长度 codeLength: { type: Number, default: 4, }, //字体大小px codeFontSize: { type: Number, default: 25, }, //字体 family: { type: String, default: "微软雅黑", }, //干扰点数 point: { type: Number, default: 10, }, //干扰线数 line: { type: Number, default: 3, }, }, methods: { changeCode() { this.draw(); }, draw() { let code = "", canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), text = "qwertyuipadfghjkxvbnmQWERTYUPASDFGHJKZXVBNM123456789"; canvas.width = this.width; canvas.height = this.height; for (let i = 0; i < this.codeLength; i++) { let j = Math.floor(Math.random() * text.length); let deg = Math.random() - 0.5; let txt = text[j]; code = code + txt.toLowerCase(); let x = 10 + i * 20; let y = 20 + Math.random() * (this.height / 2 - 10); context.font = `${this.codeFontSize}px ${this.family}`; context.translate(x, y); context.rotate(deg); context.fillStyle = this.randomColor(); context.fillText(txt, 0, 0); context.rotate(-deg); context.translate(-x, -y); } console.log(code); //把该值返回调用的页面进行判断 for (let i = 0; i <= this.line; i++) { context.strokeStyle = this.randomColor(); context.beginPath(); context.moveTo( Math.random() * this.width, Math.random() * this.height ); context.lineTo( Math.random() * this.width, Math.random() * this.height ); context.stroke(); } for (let i = 0; i <= this.point; i++) { context.strokeStyle = this.randomColor(); context.beginPath(); let x = Math.random() * this.width; let y = Math.random() * this.height; context.moveTo(x, y); context.lineTo(x + 1, y + 1); context.stroke(); } }, randomColor() { let r = this.randomNum(170), g = this.randomNum(170), b = this.randomNum(170); return "rgb(" + r + "," + g + "," + b + ")"; }, randomNum(maxNum) { return Math.floor(Math.random() * maxNum); }, }, mounted() { this.draw(); }, }; </script> <style> #canvas { cursor: pointer; border: 1px solid rgb(155, 155, 155); background-color: rgba(182, 182, 182, 0.26); } </style> ``` 调用组件，把code值传过来做个匹配就可以了