Vue implements random verification code function

<template>
 <div class="s-canvas">
 <canvas  :width="contentWidth" :height="contentHeight"></canvas>
 </div>
</template>
<script>
export default {
 name: 'SIdentify',
 props: {
 // Default registration codeidentifyCode: {
  type: String,
  default: "1234"
},
// Minimum font valuefontSi*: {
  type: Number,
  default: 35
},
// Maximum font valuefontSizeMax: {
  type: Number,
  default: 35
},
// The minimum background color valuebackgroundColorMin: {
  type: Number,
  default: 180
},
// Maximum background color valuebackgroundColorMax: {
  type: Number,
  default: 240
},
// Minimum font color valuecolorMin: {
  type: Number,
  default: 50
},
// Maximum font color valuecolorMax: {
  type: Number,
  default: 160
},
// The minimum color value of the interference linelineColorMin: {
  type: Number,
  default: 100
},
// The maximum color value of the interference linelineColorMax: {
  type: Number,
  default: 200
},
// The minimum color value of the interference pointdotColorMin: {
  type: Number,
  default: 0
},
// The maximum color value of the interference pointdotColorMax: {
  type: Number,
  default: 255
},
// Canvas widthcontentWidth: {
  type: Number,
  default: 120
},
// Canvas heightcontentHeight: {
  type: Number,
  default: 40
}
 },
 methods: {
 // Generate a random number randomNum(min, max) {
 return (() * (max - min) + min)
 },
 // Generate a random color randomColor(min, max) {
 let r = (min, max)
 let g = (min, max)
 let b = (min, max)
 return 'rgb(' + r + ',' + g + ',' + b + ')'
 },
 drawPic() {
 let canvas = ('s-canvas')
 let ctx = ('2d')
  = 'bottom'
 // Draw the background  = (, )
 (0, 0, , )
 // Draw text for (let i = 0; i < ; i++) {
 (ctx, [i], i)
 }
 (ctx)
 (ctx)
 },
 drawText(ctx, txt, i) {
 // Random production of font colors  = (, )
 // Randomly generated font size  = (, ) + 'px SimHei'
 let x = (i + 1) * ( / ( + 1))
 let y = (,  - 5)
 var deg = (-45, 45)
 // Modify the coordinate origin and rotation angle (x, y)
 (deg *  / 180)
 (txt, 0, 0)
 // Restore coordinate origin and rotation angle (-deg *  / 180)
 (-x, -y)
 },
 drawLine(ctx) {
 // Draw the interference line for (let i = 0; i < 5; i++) {
  = (, )
 ()
 ((0, ), (0, ))
 ((0, ), (0, ))
 ()
 }
 },
 drawDot(ctx) {
 // Draw the interference points for (let i = 0; i < 80; i++) {
  = (0, 255)
 ()
 ((0, ), (0, ), 1, 0, 2 * )
 ()
 }
 }
 },
 watch: {
 identifyCode() {
 ()
 }
 },
 mounted() {
 ()
 }
}
</script>

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

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

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

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