<template>
|
<canvas ref="canvas" @click="draw" width="140" height="40" style="cursor: pointer;"></canvas>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
codes: [],
|
ctx: "",
|
colors: ["red", "yellow", "blue", "green", "pink", "black"],
|
code_Len: 4
|
};
|
},
|
mounted() {
|
this.draw();
|
},
|
computed: {
|
codeString() {
|
let result = "";
|
for (let i = 0; i < this.codes.length; i++) {
|
result += this.codes[i];
|
}
|
return result.toUpperCase();
|
}
|
},
|
watch: {
|
codeString: function(newValue) {
|
this.$emit("change", newValue);
|
}
|
},
|
methods: {
|
generateRandom() {
|
this.codes = [];
|
const chars = "abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789";
|
const charsArr = chars.split("");
|
|
for (let i = 0; i < this.code_Len; i++) {
|
const num = Math.floor(Math.random() * charsArr.length);
|
this.codes.push(charsArr[num]);
|
}
|
},
|
draw() {
|
this.generateRandom();
|
this.drawText();
|
},
|
drawLine() {
|
const lineNumber = 3; // 线条条数
|
const lineX = 140;
|
const lineY = 30; // 最大线条坐标
|
for (let i = 0; i < lineNumber; i++) {
|
this.ctx.strokeStyle = this.colors[Math.floor(Math.random() * 5)];
|
this.ctx.beginPath();
|
this.ctx.moveTo(
|
Math.floor(Math.random() * lineX),
|
Math.floor(Math.random() * lineY)
|
);
|
this.ctx.lineTo(
|
Math.floor(Math.random() * lineX),
|
Math.floor(Math.random() * lineY)
|
);
|
this.ctx.stroke();
|
}
|
},
|
drawText() {
|
const canvas = this.$refs["canvas"];
|
this.ctx = canvas.getContext("2d");
|
|
this.ctx.fillStyle = "#BFEFFF";
|
this.ctx.fillRect(0, 0, 140, 40);
|
this.ctx.font = "20px Verdana";
|
|
let x = 15;
|
|
for (let i = 0; i < this.code_Len; i++) {
|
this.ctx.fillStyle = this.colors[Math.floor(Math.random() * 5)];
|
this.ctx.fillText(this.codes[i], x, 25);
|
x = x + 30;
|
}
|
|
this.drawLine();
|
}
|
}
|
};
|
</script>
|
