cfy-vue-puzzle-vcode

1.0.4 • Public • Published

vue-puzzle-vcode npm

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

img

安装

  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字段或图片加载出错时,会自动生成随机图片
  • 模态框的显示和隐藏完全由父级控制,所以用户通过验证后,需要自行隐藏模态框

Readme

Keywords

Package Sidebar

Install

npm i cfy-vue-puzzle-vcode

Weekly Downloads

0

Version

1.0.4

License

ISC

Unpacked Size

469 kB

Total Files

18

Last publish

Collaborators

  • huizhang212