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

浙公網安備 33010602011771號