简介
从项目上摘过来的,觉得值得学习
想要用js更新验证码的的话用 this.$nextTick
更新组件的v-if
的值,演示如下
this.isShowYzm = false;
this.$nextTick(() => {
this.isShowYzm = true;
});
演示
代码
组件代码如下
<template>
<div>
<canvas
style="border: 1px solid #ccc"
:id="id"
:style="'width:' + width + ';height:' + height"
></canvas>
</div>
</template>
<script>
export default {
name: "VerificationCode",
props: {
id: {
// 可选字段,有默认值
default: "C_" + new Date().getTime(),
},
width: {
// 可选字段,有默认值
default: "128px",
},
height: {
// 可选字段,有默认值
default: "30px",
},
num: {
// 可选字段,有默认值
default: 3,
},
},
model: {
prop: "code",
event: "change",
},
data() {
return {};
},
mounted() {
this.$nextTick(function () {
let this_ = this;
let show_num = [];
draw(show_num);
$("#" + this_.id).on("click", function () {
draw(show_num);
this_.$emit("change", show_num.join(""));
return;
});
this_.$emit("change", show_num.join(""));
function draw(show_num) {
let canvas_width = $("#" + this_.id).width();
let canvas_height = $("#" + this_.id).height();
let canvas = document.getElementById(this_.id); //获取到canvas的对象
let context = canvas.getContext("2d"); //获取到canvas画图的环境
canvas.width = canvas_width;
canvas.height = canvas_height;
let sCode =
"A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
let aCode = sCode.split(",");
let aLength = aCode.length; //获取到数组的长度
for (let i = 0; i <= this_.num; i++) {
let j = Math.floor(Math.random() * aLength); //获取到随机的索引值
let deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
let txt = aCode[j]; //得到随机的一个内容
show_num[i] = txt.toLowerCase();
let x = 10 + i * 20; //文字在canvas上的x坐标
let y = 20 + Math.random() * 8; //文字在canvas上的y坐标
context.font = "bold 23px 微软雅黑";
context.translate(x, y);
context.rotate(deg);
context.fillStyle = randomColor();
context.fillText(txt, 0, 0);
context.rotate(-deg);
context.translate(-x, -y);
}
for (let i = 0; i <= 5; i++) {
//验证码上显示线条
context.strokeStyle = randomColor();
context.beginPath();
context.moveTo(
Math.random() * canvas_width,
Math.random() * canvas_height
);
context.lineTo(
Math.random() * canvas_width,
Math.random() * canvas_height
);
context.stroke();
}
for (let i = 0; i <= 30; i++) {
//验证码上显示小点
context.strokeStyle = randomColor();
context.beginPath();
let x = Math.random() * canvas_width;
let y = Math.random() * canvas_height;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);
context.stroke();
}
}
function randomColor() {
//得到随机的颜色值
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
});
},
};
</script>
<style>
</style>