vue登录或其他操作进行图片验证的插件vue-puzzle-vcode
首先提前准备好图片
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/39cecda61b52624df8cd3b0a478ba3a4.png)
<template>
<button @click='open'>点击</button>
<Vcode @click.prevent :imgs="imgs" :show="isShow" @success="success" @close="close" />
</template>
<script>
import Vcode from "vue-puzzle-vcode";
let imgs = [];
for(let i = 1; i <= 20; i++){
imgs.push(require('@/assets/img/slideVerify/bgImg/'+i+'.png'))
}
export default {
components: {
Vcode
},
data(){
return{
img1: '',
imgs,
isShow: false,
currentVerification: {
text: '点击按钮进行验证',
isVerification: false,
imgList: ['https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg']
},
showVerificationVisible: false
}
},
methods: {
success(){
this.currentVerification.isVerification = true;
this.isShow = false;
this.onSubmit();
},
close(){
this.isShow = false;
},
open(){
this.isShow = true;
},
}
}
</script>