vue 前端实现登录拼图校验官方文档 <button @click="onSubmit">登录</button> <bu

QQ截图20230208174354.png

npm install vue-puzzle-vcode //安装插件

<template>
  <Vcode
   :imgs="[Img1, Img2, Img3]" //随机出现的拼图
    :show="isShow"
    @onSuccess="onSuccess"
    @onClose="onClose"
  />
  <button @click="onSubmit">登录</button>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
export default {
  components: {
    Vcode
  },
   data() {
      Img1,
      Img2,
      Img3,
      isShow: false // 验证码模态框是否出现
   },
    methods: {
      onSubmit(){
        this.isShow = true;
      },
      // 用户通过了验证
      onSuccess(msg){
        this.isShow = false; // 通过验证后，需要手动隐藏模态框
      },
      // 用户点击遮罩层，应该关闭模态框
      onClose(){
        this.isShow = false;
      }
    }
 }
</script>

官方文档