vue如何实现登录时图形验证码

这篇文章主要介绍Vue如何实现登录时图形验证码，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

具体内容如下

效果图：

点击图案可以切换字符

1.新建 Identify.vue 组件

<template>  <div>  <canvas      id="s-canvas"      :width="contentWidth"      :height="contentHeight"></canvas>  </div></template><script>export default {  name: "identify",  props: {    identifyCode: {      type: String,      default: ''    },    fontSizeMin: {      type: Number,      default: 28    },    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: 130    },    contentHeight: {      type: Number,      default: 40    }  },  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 + ')'    },    drawPic () {      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)      // 绘制文字      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'      let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))      let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)      let deg = this.randomNum(-30, 30)      // 修改坐标原点和旋转角度      ctx.translate(x, y)      ctx.rotate(deg * Math.PI / 270)      ctx.fillText(txt, 0, 0)      // 恢复坐标原点和旋转角度      ctx.rotate(-deg * Math.PI / 270)      ctx.translate(-x, -y)    },    drawLine (ctx) {      // 绘制干扰线      for (let i = 0; i < 2; 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 < 20; 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()      }    }  },  watch: {    identifyCode () {      this.drawPic()    }  },  mounted () {    this.drawPic()  }}</script><style lang="sCSS" scoped>#s-canvas {  height: 38px;}</style>

2.在父组件 index.vue注册使用

<template>    <div @click="refreshCode" >        <Identify :identifyCode="identifyCode" ></Identify>    </div></template><script>import Identify from '@/components/test/identify'export default {  name: "index",  components:{   Identify   },  data(){      return {         identifyCode: '',      // 验证码规则      identifyCodes: '123456789ABCDEFGHGKMNPQRSTUVWXYZ',    }   },  methods:{    // 切换验证码    refreshCode() {      this.identifyCode = ''      this.makeCode(this.identifyCodes, 4)      console.log(this.identifyCode)    },    // 生成随机验证码    makeCode(o, l) {      for (let i = 0; i<l; i++) {        this.identifyCode += this.identifyCodes[            Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)            ]      }    },    mounted() {        this.refreshCode()  }}</script><style scoped></style>

以上是“vue如何实现登录时图形验证码”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网精选频道！