vue实现前端人机验证

最简单的一个例子

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

<template>
  <div id="app">
    <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
    <button @click="submit">开始验证</button>
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
export default {
    
    
  name: 'App',
  components: {
    
    Vcode},
  data(){
    
    
    return {
    
    
      isShow: false
    }
  },
  methods: {
    
    
    submit() {
    
    
      this.isShow = true;
    },

    onSuccess(msg) {
    
    
      console.log(msg)
      this.isShow = false; // 通过验证后，需要手动关闭模态框
    },

    onClose() {
    
    
      this.isShow = false;
    },
  },
}
</script>

参数

事件

自定义图片

<template>
  <Vcode :imgs="[Img1, Img2]" />
</template>
 
<script>
import Img1 from "~/assets/img1.png";
import Img2 from "~/assets/img2.png";
 
export default {
    
    
  data() {
    
    
    return {
    
    
      Img1,
      Img2,
    };
  },
};
</script>

也可以是网络图片完整 URL 路径，但注意图片跨域问题，因为 canvas api 无法调用跨 域的图片

说明
当不传递 imgs 字段或图片加载出错时，会自动生成随机图片
模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框