vue验证码功能

<template>
  <div class="book">
  <el-input style="width: 200px" v-model="inputData"></el-input>
  <el-button @click="test_verify" type="primary">验证</el-button>
  <br>
  <canvas id='auth-code' @click="get_list"></canvas>
  <el-button style="padding:0;border:0" @click="get_list">看不清，换一张</el-button>
  </div>
</template>

<script>
export default {
  name: 'book',
  data () {
    return {
      inputData: '',
      securityCode: '',
      arrayData: ['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']
    }
  },
  methods: {
    /** 验证 **/
    test_verify () {
      if (this.securityCode === this.inputData) {
        this.$message({
          type: 'success',
          message: '验证通过！'
        })
      } else {
        this.$message({
          type: 'error',
          message: '验证失败！请重新验证'
        })
        this.get_list()
        this.inputData = ''
      }
    },
    /** 获取验证码 **/
    get_list () {
      var str = ''
      for (let i = 0; i < 6; i++) {
        var index = parseInt((Math.random() * 52))
        str += this.arrayData[index]
      }
      this.securityCode = str
      let options = {
        canvasId: 'auth-code',
        txt: this.securityCode,
        height: 50,
        width: 150,
      }
      this.writeAuthCode(options)
    },
    /** 画图 **/
    writeAuthCode (options) {
      let canvas = document.getElementById(options.canvasId)
      canvas.width = options.width || 300
      canvas.height = options.height || 150
      let ctx = canvas.getContext('2d')/**创建一个canvas对象*/
      ctx.textBaseline = 'middle'
      ctx.fillStyle = this.randomColor(180, 255)/**这个范围的颜色作背景看起来清晰一些*/
      ctx.fillRect(0, 0, options.width, options.height)
      console.log(options.txt)
      for (let i = 0; i < options.txt.length; i++) {
        let txt = options.txt.charAt(i)/**让每个字不一样*/
        ctx.font = '20px SimHei'
        ctx.fillStyle = this.randomColor(50, 160)/**随机生成字体颜色*/
        ctx.shadowOffsetY = this.randomNum(-3, 3)
        ctx.shadowBlur = this.randomNum(-3, 3)
        ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
        let x = options.width / (options.txt.length + 1) * (i + 1)
        let y = options.height / 2
        let deg = this.randomNum(-30, 30)
        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)
      }
      /**1~4条随机干扰线随机出现*/
      for (let i = 0; i < this.randomNum(1, 4); i++) {
        ctx.strokeStyle = this.randomColor(40, 180)
        ctx.beginPath()
        ctx.moveTo(this.randomNum(0, options.width), this.randomNum(0, options.height))
        ctx.lineTo(this.randomNum(0, options.width), this.randomNum(0, options.height))
        ctx.stroke()
      }
      /**绘制干扰点*/
      for (let i = 0; i < options.width / 6; i++) {
        ctx.fillStyle = this.randomColor(0, 255)
        ctx.beginPath()
        ctx.arc(this.randomNum(0, options.width), this.randomNum(0, options.height), 1, 0, 2 * Math.PI)
        ctx.fill()
      }
      console.log(ctx)
      console.log(canvas)
    },    
    /**随机数字**/
    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 + ")"
    }
  },
  mounted () {
    this.get_list()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>