vue拼图验证（vue-puzzle-vcode）

01首先安装依赖

npm install vue-puzzle-vcode --save

02使用详解

HTML

<vcode
      :show="isShow" // 控制开关
      @success="onSuccess()"//成功通过验证的回调
      @close="onClose()"//用户点击遮罩层的回调
      successText="验证通过，已发送短信"
      />

vue.js

import Vcode from "vue-puzzle-vcode";
  export default {
    data(){
      return {
        isShow: false, // 验证码模态框是否出现
      }
    },
    components:{
      Vcode
    },
    methods:{
      // 用户通过了验证
      onSuccess(){
        this.isShow = false; // 通过验证后，需要手动隐藏模态框
        //可执行通过验证后的操作
      },
      // 用户点击遮罩层，应该关闭模态框
      onClose(){
        this.isShow = false;
      }
    }
  }

参数

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

事件

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

03自定义图片

<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>

本文转载自www.cnblogs.com/zyfeng/p/13…