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>

　　

 

<