实现页面
<template> <div class="code" @click="refreshCode"> <!-- :fresh:父组件向子组件传送刷新验证码的信号; @makedCode:子组件向父组件传送验证码的值--> <s-identify :fresh="flag" @makedCode="getMakedCode"></s-identify> </div> </template> <script> import SIdentify from './identify.vue'; export default { name: 'codetest', data() { return { flag: true, //该值变化,就会触发刷新 code: '' //刷新后的验证码 }; }, components: { SIdentify }, // 验证码初始化 mounted() { console.log(this.flag); this.flag = !this.flag; }, methods: { // 切换验证码 refreshCode() { this.flag = !this.flag; }, getMakedCode(code) { this.code = code; console.log('getMakedCode:', this.code); } } }; </script> <style> .code { /*margin: 400px auto;*/ width: 114px; height: 40px; /*border: 1px solid red;*/ } </style>
组件页面
<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </template> <script> export default { name: 'SIdentify', props: { fresh: true, fontSizeMin: { type: Number, default: 20 }, fontSizeMax: { type: Number, default: 36 }, backgroundColorMin: { type: Number, default: 180 }, backgroundColorMax: { type: Number, default: 240 }, colorMin: { type: Number, default: 50 }, colorMax: { type: Number, default: 160 }, lineColorMin: { type: Number, default: 40 }, lineColorMax: { type: Number, default: 180 }, dotColorMin: { type: Number, default: 0 }, dotColorMax: { type: Number, default: 255 }, contentWidth: { type: Number, default: 112 }, contentHeight: { type: Number, default: 38 } }, data() { return { identifyCodes: 'abcdefghijkmnpqrstuvwxyzABCEFGHJKLMNPQRSTWXYZ1234567890', identifyCode: '' }; }, methods: { // 生成一个随机数 randomNum(min, max) { return Math.floor(Math.random() * (max - min) + min); }, // 生成一个随机的颜色 randomColor(min, max) { let r = this.randomNum(min, max); let g = this.randomNum(min, max); let b = this.randomNum(min, max); return 'rgb(' + r + ',' + g + ',' + b + ')'; }, drawPic() { let canvas = document.getElementById('s-canvas'); let ctx = canvas.getContext('2d'); ctx.textBaseline = 'bottom'; // 绘制背景 ctx.fillStyle = this.randomColor( this.backgroundColorMin, this.backgroundColorMax ); ctx.fillRect(0, 0, this.contentWidth, this.contentHeight); // 绘制文字 for (let i = 0; i < this.identifyCode.length; i++) { this.drawText(ctx, this.identifyCode[i], i); } // this.drawLine(ctx) this.drawDot(ctx); }, drawText(ctx, txt, i) { ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax); ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'; let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)); let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5); var deg = this.randomNum(-10, 10); // 修改坐标原点和旋转角度 ctx.translate(x, y); ctx.rotate((deg * Math.PI) / 180); ctx.fillText(txt, 0, 0); // 恢复坐标原点和旋转角度 ctx.rotate((-deg * Math.PI) / 180); ctx.translate(-x, -y); }, drawLine(ctx) { // 绘制干扰线 for (let i = 0; i < 3; i++) { ctx.strokeStyle = this.randomColor( this.lineColorMin, this.lineColorMax ); ctx.beginPath(); ctx.moveTo( this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight) ); ctx.lineTo( this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight) ); ctx.stroke(); } }, drawDot(ctx) { // 绘制干扰点 for (let i = 0; i < 30; i++) { ctx.fillStyle = this.randomColor(0, 255); ctx.beginPath(); ctx.arc( this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI ); ctx.fill(); } }, // 生成四位随机验证码 makeCode(o, l) { this.identifyCode = ''; for (let i = 0; i < l; i++) { this.identifyCode += this.identifyCodes[ this.randomNum(0, this.identifyCodes.length) ]; } //绘制图片 this.drawPic(); //传值给父组件 this.$emit('makedCode', this.identifyCode); } }, watch: { fresh() { //监听事件 this.makeCode(this.identifyCodes, 4); } } }; </script>
说明