vue登录或其他操作进行图片验证的插件vue-puzzle-vcode

vue登录或其他操作进行图片验证的插件vue-puzzle-vcode

首先提前准备好图片

<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.currentVerification.text = '验证成功';
	      // this.$message.success('验证成功')
	      this.isShow = false;
	      this.onSubmit();
	    },
	    close(){
	      this.isShow = false;
	    },
	    open(){
			  this.isShow = true;
		},
   }
}
</script>