vue-puzzle-vcode

基于开源的vue-puzzle-vcode改造的，实现了图形后台生成，验证也是走的后端。

安装

  npm install cfy-vue-puzzle-vcode --save

使用

import Vcode from "cfy-vue-puzzle-vcode";

<Vcode
  :show="isShow"
  @onSuccess="onSuccess"
/>
<Vcode
                :show="isVerificationShow"
                :imgs="puzzleImgList"
                :check-fun="check"
                :start-y="startY"
                :refresh="refreshVcode"
                @onSuccess="onSuccess"
                @close="isVerificationShow=false"
              />

最简单例子

<template>
  <Vcode
    :show="isShow"
    @onSuccess="onSuccess"
    @onClose="onClose"
  />
  <button @click="onSubmit">登录</button>
</template>

<script>
  import Vcode from "vue-puzzle-vcode";
  export default {
    data(){
      return {
        isShow: false, // 验证码模态框是否出现
      }
    },
    components:{
      Vcode
    },
    methods:{
      onSubmit(){
        this.isShow = true;
      },
      // 用户通过了验证, msg是用户移动拼图的位置和目标位置的偏差px值
      onSuccess(msg){
        this.isShow = false; // 通过验证后，需要自行隐藏模态框
      },
      // 用户点击遮罩层，应该关闭模态框
      onClose(){
        this.isShow = false;
      }
    }
  }
</script>

参数

| 字段 | 类型 | 默认值 | 说明 | | ------------ | ------- | ------------------ | ---------------------- | | show | Boolean | false | 是否显示验证码弹框 | | canvasWidth | Number | 310 | 主图区域的宽度 | | canvasHeight | Number | 160 | 主图区域的高度 | | imgs | Array | null | 自定义图片，见下方例子 | | successText | String | "验证通过！" | 验证成功时的提示文字 | | failText | String | "验证失败，请重试" | 验证失败时的提示文字 | | sliderText | String | "拖动滑块完成拼图" | 下方滑动条里的文字 |

事件

| 事件名 | 返回值 | 说明 | | --------- | ------ | ------------------------------------------------------------ | | onSuccess | 偏差值 | 验证通过时会触发，返回值是用户移动的距离跟目标距离的偏差值px | | onFail | 偏差值 | 验证失败时会触发，返回值同上 | | onClose | null | 用户点击遮罩层的回调 |

自定义图片

<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路径，但注意图片跨域问题

说明

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