Vue纯数字验证码

该验证码为4个数字生成的验证码，亲自验证点击切换，验证码组件Identify.vue可直接复制使用

提示: 该验证码图片缩小后数字经常看不清所以在这里仅仅是实现，没有详细进行实现登陆，仅仅实现了生成验证码，点击验证码后刷新验证码，真正的项目，若验证码图片要求小一点该验证码方式不合适，所以没有进行详细设计

Identify.vue

Login.vue  一下是引用，注意位置

首先是引入验证码组件

import Identify from '@/utils/Identify'

export default {
   components: {
       Identify
  }
}

在表单中引入

点击触发事件，在方法method中

    // 生成随机数
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 切换验证码
    refreshCode () {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成四位随机验证码
    makeCode (o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
          ]
      }
      console.log(this.identifyCode)
    }

 页面首次进入必须将默认的验证码去掉，并刷出新的验证码

  mounted () {
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },

Login.vue登录页全页代码

代码生成效果