Vue 前端图形数字验证码插件

git：https://gitee.com/brownshrike/captcha-mini

npm install captcha-mini

 

<el-form-item prop="vercode">
           <el-input v-model="formData.code" autocomplete="off" placeholder="请输入验证码" maxlength="4">
                  <template slot="prepend">
                    <img src="/static/image/ico3.png" class="icopic" />
                   </template>
                   <template slot="append">
                     <canvas @click="refreshCaptcha" id="captchacodeLogin" style="width:120px; height:56px;"></canvas>  
                  </template>
           </el-input>
</el-form-item>
<script>
import Captcha from 'captcha-mini';

refreshCaptcha() {
  const captchaCanvas = document.getElementById('captchacodeLogin');
  let that = this;
  if (captchaCanvas) {
	 this.captchaClass.draw(captchaCanvas,r=>{
		that.captchaText = r.toLowerCase();
		console.log(that.captchaText, '验证码44');
	});
  } else {
	console.error('Captcha canvas not found');
  }
},
    accountLogin(){
            if(this.formData.code.toLowerCase() !== this.captchaText.toLowerCase()){
                   this.$message.error('验证码错误');
                  this.refreshCaptcha();
                 return;
           }
   }
</script>

　　

 

<