vue-puzzle-vcode

Vue 纯前端的拼图人机验证、右滑拼图验证
我知道有第 3 方的很好用,比如 GEETEST 的拼图验证，但要引入 SDK 跟后台配合，还有接口交互。
太麻烦了，有时候突然改需求来不及弄，为了应付老板，就弄了个纯前端的随便验一下得了。

DEMO: https://isluo.com/work/vue-puzzle-vcode/

重要更新

2020/03/16 v1.1.0 事件名改变

@onSuccess -> @success
@onClose -> @close
@onFail -> @fail

安装

  npm install vue-puzzle-vcode --save

使用

import Vcode from "vue-puzzle-vcode";

<Vcode :show="isShow" @success="success" @close="close" />

IE

我没加babel-polyfill,所以在 IE 里会报错：SCRIPT1002: 语法错误（IE 不支持箭头 函数）
需要兼容 IE 的朋友，请直接复制src/app.vue和src/assets这两个东西 到自己的项目里，给app.vue随便改个名字，就是个普通 vue 组件，直接用即可。
src/assets里是一张小图片，app.vue中有引用，注意自己匹配一下引用路径

最简单例子

<template>
  <div>
    <Vcode :show="isShow" @success="success" @close="close" />
    <button @click="submit">登录</button>
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
export default {
  data() {
    return {
      isShow: false, // 验证码模态框是否出现
    };
  },
  components: {
    Vcode,
  },
  methods: {
    submit() {
      this.isShow = true;
    },
    // 用户通过了验证
    success(msg) {
      this.isShow = false; // 通过验证后，需要手动隐藏模态框
    },
    // 用户点击遮罩层，应该关闭模态框
    close() {
      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 字段或图片加载出错时，会自动生成随机图片
• 模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框

更新日志

1.1.5 2021/02/09 把所有package包更新到最新，减小代码体积。 （目前不支持vue3.0, 会报错， 等vue3.0正式发布时再改）