随机验证码vue实现，登录验证码随机验证码数字和字母类型的

1、组件

<!--loginCode登录验证码组件-->

<template>

  <canvas id="canvasCode" :width="contentWidth" :height="contentHeight" />

</template>

<script>

export default {

  name: 'LoginCode',

  props: {

    identifyCode: {

      type: String,

      default: '6834'

    },

    fontSizeMin: {

      type: Number,

      default: 20

    },

    fontSizeMax: {

      type: Number,

      default: 38

    },

    backgroundColorMin: {

      type: Number,

      default: 180

    },

    backgroundColorMax: {

      type: Number,

      default: 240

    },

    colorMin: {

      type: Number,

      default: 50

    },

    colorMax: {

      type: Number,

      default: 160

    },

    lineColorMin: {

      type: Number,

      default: 40

    },

    lineColorMax: {

      type: Number,

      default: 180

    },

    dotColorMin: {

      type: Number,

      default: 0

    },

    dotColorMax: {

      type: Number,

      default: 255

    },

    contentWidth: {

      type: Number,

      default: 110

    },

    contentHeight: {

      type: Number,

      default: 46

    }

  },

  watch: {

    identifyCode() {

      this.drawPic()

    }

  },

  mounted() {

    this.drawPic()

  },

  methods: {

    // 生成一个随机数

    randomNum(min, max) {

      return Math.floor(Math.random() * (max - min) + min)

    },

    // 生成一个随机的颜色

    randomColor(min, max) {

      const r = this.randomNum(min, max)

      const g = this.randomNum(min, max)

      const b = this.randomNum(min, max)

      return 'rgb(' + r + ',' + g + ',' + b + ',' + '0.7' + ')'

    },

    drawPic() {

      const canvas = document.getElementById('canvasCode')

      const ctx = canvas.getContext('2d')

      ctx.textBaseline = 'bottom'

      // 绘制背景

      ctx.fillStyle = this.randomColor(

        this.backgroundColorMin,

        this.backgroundColorMax

      )

      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)

      // 绘制文字

      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) {

      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)

      ctx.font =

        this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'

      const x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))

      const y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)

      var deg = this.randomNum(-45, 45)

      // 修改坐标原点和旋转角度

      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)

    },

    drawLine(ctx) {

      // 绘制干扰线

      for (let i = 0; i < 8; 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) {

      // 绘制干扰点

      for (let i = 0; i < 100; 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()

      }

    }

  }

}

</script>

2、登录页面上使用

data里面定义值

     identifyCodeType: 'abcdefghuiokvbnm1234567890', // 定义验证类型 1.数字 2.字母

      identifyCode: '',

      inputCode: '', // text框输入的验证码

// 导入组件

import loginCode from '@/components/loginCode.vue'

 <el-form-item prop="username" style="position: relative;">

                <!-- <span class="el-icon-document" style="font-size:20px;color:#A7A7A7;z-index:1;position: absolute;top:29%;" /> -->

                <span class="svg-container">

                  <svg-icon icon-class="login-user1" class="svg-icon" />

                </span>

                <el-input

                  v-model="inputCode"

                  style="width: 305px"

                  type="text"

                  placeholder="请输入您的验证码"

                />

                <div style="position: absolute;top:2px;right:0px" @click="refreshCode()">

                  <loginCode :identify-code="identifyCode" />

                </div>

                <!-- <div style="display: flex; align-items: center; justify-content: center"> -->

                <!-- <span>验证码：</span> -->

                <!--   <el-input

                    v-model="inputCode"

                    style="width: 180px"

                    type="text"

                    placeholder="请输入您的验证码"

                  /> -->

                <!--  <div @click="refreshCode()">

                    <loginCode :identify-code="identifyCode" />

                  </div> -->

                <!-- </div> -->

              </el-form-item>

 mounted() {

    this.refreshCode()

  },

 // 验证码规则

    getSubmitData() {

      if (this.inputCode === '') {

        alert('请输入验证码')

        return

      }

      if (this.identifyCode !== this.inputCode) {

        this.inputCode = ''

        this.refreshCode()

        alert('请输入正确的验证码!')

        return

      } else {

        this.$message({

          message: '验证成功',

          type: 'success'

        })

      }

    },

    // 验证码

    randomNum(min, max) {

      return Math.floor(Math.random() * (max - min) + min)

    },

    // 初始化验证码

    refreshCode() {

      this.identifyCode = '' // 输入框置空

      this.makeCode(this.identifyCodeType, 4) // 验证码长度为4

    },

    // 随机切换验证码

    makeCode(o, l) {

      for (let i = 0; i < l; i++) {

        this.identifyCode +=

          this.identifyCodeType[

            this.randomNum(0, this.identifyCodeType.length)

          ]

      }

      console.log(this.identifyCode)

    },

验证码校验和登录合并

handleLogin() {

      // 验证码校验

      if (this.inputCode === '') {

        alert('请输入验证码')

        return

      }

      if (this.identifyCode !== this.inputCode) {

        this.inputCode = ''

        this.refreshCode()

        alert('请输入正确的验证码!')

        return

      } else {

        this.$message({

          message: '验证成功',

          type: 'success'

        })

      }