vue实现前端登录验证码

一、验证码组件

<template>
  <div class="s-draw">
    <canvas id="s-draw" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</template>
<script>
export default {
  name: 'SIdentify',
  props: {
    identifyCode: {
      type: String,
      default: '1234',
    },
    fontSizeMin: {
      type: Number,
      default: 25,
    },
    fontSizeMax: {
      type: Number,
      default: 30,
    },
    backgroundColorMin: {
      type: Number,
      default: 255,
    },
    backgroundColorMax: {
      type: Number,
      default: 255,
    },
    colorMin: {
      type: Number,
      default: 0,
    },
    colorMax: {
      type: Number,
      default: 160,
    },
    lineColorMin: {
      type: Number,
      default: 100,
    },
    lineColorMax: {
      type: Number,
      default: 255,
    },
    dotColorMin: {
      type: Number,
      default: 0,
    },
    dotColorMax: {
      type: Number,
      default: 255,
    },
    contentWidth: {
      type: Number,
      default: 132,
    },
    contentHeight: {
      type: Number,
      default: 31,
    },
  },
  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-draw')
      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)
      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)
    },
  },
  watch: {
    identifyCode() {
      this.drawPic()
    },
  },
  mounted() {
    this.drawPic()
  },
}
</script>
<style scoped>
.s-draw {
  height: 38px;
}
.s-draw canvas {
  margin-top: 5px;
  margin-left: 8px;
}
</style>

二、父组件注册、使用

<template>
  <Form ref="loginForm" :model="form" :rules="rules">
    <FormItem prop="userName">
      <Input v-model="form.userName" placeholder="请输入用户名"/>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" v-model="form.password" placeholder="请输入密码"/>
    </FormItem>
    <FormItem>
      <div style="display:flex" id="atilposition">
        <Input
          type="text"
          ref="inputCode"
          v-model="inputCode"
          style="width:175px"
          placeholder="请输入验证码"
          clearable
        ></Input>
        <span @click="createCode" id="spancode">
                <Sldentify :identifyCode="code"></Sldentify>
              </span>
      </div>

      <Button :loading="form.loading" @click="handleSubmit" type="primary"  long class="bottom-size">立即登录</Button>
    </FormItem>
  </Form>
</template>
import Sldentify from './SIdentify'
  components:{
    Sldentify
  },
  data () {
    return {
      code:'',
      inputCode:'',
      form: {
        userName: '',
        password: '',
        loading: false
      }
    }
  },
  methods: {
    createCode() {
      let text = "";
      let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
      // 设置验证码长度，
      for( let i=0; i < 4; i++ ){
        text += possible.charAt(Math.floor(Math.random() * possible.length));
      }
      this.code = text
    },
    handleSubmit () {
      this.form.loading = true
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          if(this.inputCode == ''){
            this.$Message.error('请输入验证码')
            return
          }
          if(this.inputCode.toLowerCase() != this.code.toLowerCase()){
            this.$Message.error('验证码错误')
            this.inputCode = ''
            this.createCode()
            return
          }
          this.$emit('on-success-valid', {
            userName: this.form.userName,
            password: this.form.password
          })
        } else {
          this.form.loading = false
        }
      })
    }
},
mounted(){
this.createCode()
},

成果：