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

这篇博客介绍了如何在Vue项目中使用vue-puzzle-vcode插件来实现登录或其他操作时的图片验证功能。通过代码示例展示了如何预加载图片,以及在用户点击按钮时显示和关闭验证码,成功验证后的处理方法。
摘要由CSDN通过智能技术生成

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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值