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

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

npm install captcha-mini

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

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

　　

 

<