Vue Realizes Random Verification Code Function

In this paper, we share the specific code of Vue to realize random verification code function for your reference. The specific contents are as follows

Step 1: Create a subcomponent named identify. vue

<template>
 <div class="s-canvas">
 <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
 </div>
</template>
<script>
export default {
 name: 'SIdentify',
 props: {
 //  Default registration code 
identifyCode: {
  type: String,
  default: "1234"
},
//  Minimum font value 
fontSizeMin: {
  type: Number,
  default: 35
},
//  Maximum font value 
fontSizeMax: {
  type: Number,
  default: 35
},
//  Minimum value of background color color value 
backgroundColorMin: {
  type: Number,
  default: 180
},
//  Maximum value of background color 
backgroundColorMax: {
  type: Number,
  default: 240
},
//  Minimum value of font color color value 
colorMin: {
  type: Number,
  default: 50
},
//  Maximum font color value 
colorMax: {
  type: Number,
  default: 160
},
//  Minimum color value of interference line color 
lineColorMin: {
  type: Number,
  default: 100
},
//  Maximum color value of interference line color 
lineColorMax: {
  type: Number,
  default: 200
},
//  Minimum color value of interference point color 
dotColorMin: {
  type: Number,
  default: 0
},
//  Maximum color value of interference point color 
dotColorMax: {
  type: Number,
  default: 255
},
//  Canvas width 
contentWidth: {
  type: Number,
  default: 120
},
//  Canvas height 
contentHeight: {
  type: Number,
  default: 40
}
 },
 methods: {
 //  Generate 1 Random number 
 randomNum(min, max) {
 return Math.floor(Math.random() * (max - min) + min)
 },
 //  Generate 1 Random colors 
 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'
 //  Draw Background 
 ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
 ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
 //  Draw text 
 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) {
 //  Randomly produce font colors 
 ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
 //  Randomly generate font size 
 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(-45, 45)
 //  Modify coordinate origin and rotation angle 
 ctx.translate(x, y)
 ctx.rotate(deg * Math.PI / 180)
 ctx.fillText(txt, 0, 0)
 //  Restore coordinate origin and rotation angle 
 ctx.rotate(-deg * Math.PI / 180)
 ctx.translate(-x, -y)
 },
 drawLine(ctx) {
 //  Drawing interference line 
 for (let i = 0; i < 5; 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) {
 //  Drawing interference points 
 for (let i = 0; i < 80; 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()
 }
 }
 },
 watch: {
 identifyCode() {
 this.drawPic()
 }
 },
 mounted() {
 this.drawPic()
 }
}
</script>

Step 2 Register and reference in subcomponents

<script>
  import SIdentify from "./common/sIdentify.vue";
  export default {
    components: { SIdentify },
  }
</script>

Step 3 Using subcomponents in the main page

1. In template:

<template>
 <div class="code" @click="refreshCode">
  <s-identify :identifyCode="identifyCode"></s-identify>
 </div>
</template>

2. In data:

data() {
 return {
   identifyCode: "",
   identifyCodes: "",
 }
},

3. In methods:

methods: {
  //  Generate random numbers 
  randomNum(min, max) {
    max = max + 1
    return Math.floor(Math.random() * (max - min) + min);
  },
  //  Update verification code 
  refreshCode() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
    console.log(' Current verification code ==',this.identifyCode);
  },
  //  Randomly generate verification code strings 
  makeCode(data, len) {
    for (let i = 0; i < len; i++) {
      this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes)]
    }
  },
}