Vue封装组件实现验证码功能
每天进步一点点...
对于些限制比较低、要求不高的情况下，可以在前端使用验证码做一个简单验证
<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值传过来做个匹配就可以了
