vue 验证码的几种方式

1.

 <span
      @click="randyzm()"
      style="display: inline-block;text-align: center; width: 90px;font-size: 20px; height: 32px; line-height:32px; color: #2b3b4b;background-color: #1ea7fe"
    >{
  {code}}</span>

	data(){
   
		return{
   
			code:''
			}
	}
	// 方法
   randyzm() {
   
      //生成随机验证码
      let code = ''
      let coden = ''
      var codeLength = 4 //验证码的长度
      var random = new Array(
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
        'a',
        'b',
        'c',
        'd',
        'e',
        'f',
        'g',
        'h',
        'i',
        'j',
        'k',
        'l',
        'm',
        'n',
        'o',
        'p',
        'q',
        'r',
        's',
        't',
        'u',
        'v',
        'w',
        'x',
        'y',
        'z'
      ) //随机数
      for (var i = 0; i < codeLength; i++) {
   
        //循环操作
        var index = Math.floor(Math.random() * 62) //取得随机数的索引（0~61）
        code += random[index] //根据索引取得随机数加到code上
        coden += random[index] //根据索引取得随机数加到code上
      }
      this.code = coden //把code值赋给验证码
      console.log(this.code)
    },

2. 封装组建

父组建

<template>
  <div class="home">
    <vue-image @getIdentifyCode="getIdentifyCodes" />
  </div>
</template>
<script>
import VueImage from '../../components/echarts/vueImageVerify.vue'
components:{
     
	VueImage
},
methods:{
     
 getIdentifyCodes(value) {
     
	      console.log('------', value)
	      // 判断验证码输入是否有误 和输入的文本框
	      // if (this.verify.toLowerCase() != value.toLowerCase()) {
     
	      // Toast.fail('验证码有误')
	      // return
	      // }
 }
}
</script>

子组建

 <template>
  <div class="div" @click="createdCode">
    <canvas id="div" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</template>
   <script>
import Vue from 'vue'
export default Vue.extend({
     
  props: {
     
    fontSizeMin: {
     
      type: Number,
      default: 25
    },
    fontSizeMax: {
     
      type: Number,
      default: 30
    },
    backgroundColorMin: {
     
      type: Number,
      default: 255
    },
    backgroundColorMax: {
     
      type: Number,
      default: 255
    },
    colorMin: {
     
      type: Number,
      default: 0
    },
    colorMax: {
     
      type: Number,
      default: 160
    },
    lineColorMin: {
     
      type: Number,
      default: 100
    },
    lineColorMax: {
     
      type: Number,
      default: 255
    },
    dotColorMin: {
     
      type: Number,
      default: 0
    },
    dotColorMax: {
     
      type: Number,
      default: 255
    },
    contentWidth: {
     
      type: Number,
      default: 120
    },
    contentHeight: {
     
      type:</