vue本地生成验证码，字母数字组合(转载)

1、这个随机生成验证码，是我之前在别人博客上找的，我不知道链接了，这个是我拿过来，修改使用的。转载的，转载的，转载的。

2、验证码组件页面

<template>
  <div class="s-canvas">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</template>
<script>
export default {
  name: "SIdentify",
  props: {
    isRefreshCode: {
      type: Boolean,
      default: false
    },
    identifyCodes: {
      type: Array
    },
    identifyLen: {
      type: Number,
      default: 4
    },
    fontSizeMin: {
      type: Number,
      default: 16
    },
    fontSizeMax: {
      type: Number,
      default: 40
    },
    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: 90
    },
    contentHeight: {
      type: Number,
      default: 35
    }
  },
  data() {
    return {
      nums: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "0",
        "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"
      ],
      identifyText: ""
    };
  },
  methods: {
    // 生成一个随机数
    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 + ")";
    },
    // 绘制干扰线
    drawLine(ctx) {
      for (let i = 0; i < 1; 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 < 50; i++) {
        ctx.fillStyle = this.randomColor(0, 255);
        ctx.beginPath();
        ctx.arc(
          this.randomNum(0, this.contentWidth),
          this.randomNum(0, this.contentHeight),
          1,
          0,
          Math.PI
        );
        ctx.fill();
      }
    },
    // 生成l长度的验证码
    makeCode(o, l) {
      let identifyCodes = o;
      this.identifyText = "";
      for (let i = 0; i < l; i++) {
        this.identifyText +=
          identifyCodes[this.randomNum(0, identifyCodes.length)];
      }
    },
    // 验证码文本
    drawText(ctx, txt, i) {
      ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax);
      ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + "px SimHei";
      let x = (i + 1) * (this.contentWidth / (this.identifyText.length + 1));
      let 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);
    },
    // 验证码图形
    drawPic() {
      let identifyCodesArray = this.identifyCodes ? this.identifyCodes : this.nums;
      this.makeCode(identifyCodesArray, this.identifyLen);
      let identifyCode = "";
      let canvas = document.getElementById("s-canvas");
      let ctx = canvas.getContext("2d");
      ctx.textBaseline = "bottom";
      // 绘制背景
      ctx.fillStyle = this.randomColor(
        this.backgroundColorMin,
        this.backgroundColorMax
      );
      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);
      // console.log(this.identifyText, "huizhi");
      // 绘制文字
      for (let i = 0; i < this.identifyLen; i++) {
        this.drawText(ctx, this.identifyText[i], i);
        identifyCode += this.identifyText[i];
      }
      //   for (let i = 0; i < this.identifyArray.length; i++) {
      //     this.drawText(ctx, this.identifyArray[i], i);
      //   }
      this.drawLine(ctx);
      this.drawDot(ctx);
      // console.log(identifyCode, "要传的值");
      // 向父组件传值
      this.$emit("func", identifyCode);
    }
  },
  watch: {
    isRefreshCode(val) {
      // console.log(val, 'val');
      if (val === true) {
        this.drawPic();
      }
    }
  },
  mounted() {
    this.drawPic();
  }
};
</script>
<style lang="scss" scoped>
.s-canvas {
  height: 32px;
  canvas {
    vertical-align: middle;
    margin-bottom: 5px;
    margin-left: 12px;
    cursor: pointer;
    border-radius: 3px;
  }
}
</style>

3、使用验证码

引入

import SIdentify from "./components/verifty.vue";

注册

components: { SIdentify },

使用

//输入验证码进行校验
<input id="verificationCode" autocomplete="off" type="text" @keyup.enter="handleLogin" style="width:150px" @blur="handelVerfity" placeholder="请输入验证码" />
//生成的验证码
<div class="identify-code" @click="refreshCode">
     <!--验证码组件-->
     <s-identify @func="getSidentifyCode" :isRefreshCode="isRefreshCode"></s-identify>
</div>
<div class="user_box">
     <el-button :loading="loading" type="submit" class="submit" value="登 录" @click="handleLogin">登 录</el-button>
</div>

data中定义，输入验证码和获取验证码

export default{
	 data() {
	 	return{
	 	     loading: false,
	 		 verificationCode: "",//输入验证码
      		 identifyCode: "",//获取验证码
             isRefreshCode: false,
	 	}
	 },
	 methods{
	 	// 点击登录进行校验
	    handleLogin() {
	      this.handelVerfity();
	    },
	 	// 验证码验证
	    handelVerfity() {
	      let verify = document.getElementById('verify');
	      let verificationCode = document.getElementById('verificationCode');
	      this.verfityValid = verfityTest(verificationCode, this.identifyCode, verify);
	      // console.log(this.verfityValid, 'verfityValid')
	    },
    	// 点击切换验证码
	    refreshCode() {
	      this.identifyCode = "";
	      this.isRefreshCode = true;   //更改状态--SIdentify组件中监听该状态
	    },
    	// 获取验证码
	    getSidentifyCode(data) {
	      this.identifyCode = data;
	      this.isRefreshCode = false;
	      // console.log(this.identifyCode, "接收到的code");
	    }
	 }
}