vue-puzzle-vcode与vue-drag-verify纯前端的拼图人机验证、右滑拼图验证

转载作品！以获取原作者允许，原文地址，感觉写的比较全面，也比较实用，大家可以去看看原文章；

纯前端的拼图人机验证、右滑拼图验证

1、vue-puzzle-vcode

github地址：https://github.com/javaLuo/vue-puzzle-vcode

效果图#

示例#

import Vcode from "vue-puzzle-vcode";

<Vcode
  :show="isShow"
  :canvasWidth="400"
  :canvasHeight="250"
  :puzzleScale="1"
  :sliderSize="40"
  :range="10"
  :imgs="[Img1, Img2]"
  successText="验证成功！"
  failText="验证失败，请重试！"
  sliderText="拖动滑块验证"
  @success="onSuccess"
  @fail="onFail"
/>

参数#

字段	类型	默认值	说明
show	Boolean	false	是否显示验证码弹框
canvasWidth	Number	310	主图区域的宽度，单位 px
canvasHeight	Number	160	主图区域的高度，单位 px
puzzleScale	Number	1	拼图块(小的拼图)的大小比例，0.2 ～ 2 ，数字越大，拼图越大
sliderSize	Number	50	左下角用户拖动的那个滑块的尺寸，单位 px
range	Number	10	判断成功的误差范围，单位 px, 滑动的距离和拼图的距离小于等于此值时，会判定重合
imgs	Array	null	自定义图片，见下方例子
successText	String	"验证通过！"	验证成功时的提示文字
failText	String	"验证失败，请重试"	验证失败时的提示文字
sliderText	String	"拖动滑块完成拼图"	下方滑动条里的文字

事件#

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

现在这个也是支持vue3的，大家可以去github上看具体教程

2、vue-drag-verify

github地址：https://github.com/AshleyLv/vue-drag-verify

效果图#

示例#

import dragVerify from "vue-drag-verify";

<drag-verify
  :width="300"
  :height="50"
  text="拖拽滑块右滑验证"
  successText="验证成功"
  background="#ccc"
  color="#fff"
  progressBarBg="#ff9"
  completedBg="#58bc58"
  :circle="true"
  handlerIcon="el-icon-thumb"
  successIcon="el-icon-check"
  handlerBg="#F9B344"
  textSize="16px"
  @passcallback="onPasscallback"
/>	

属性#

参数	类型	属性	说明
width	Number	200	组件的宽度
height	Number	60	组件的高度
text	String	swiping to the right side	文本显示在组件上
successText	String	success	文本显示何时成功
background	String	#ccc	组件的背景颜色
color	String	#ffffff	文字的颜色
progressBarBg	String	#FFFF99	进度条的背景颜色
completedBg	String	#66cc66	按钮拖到右侧时组件的背景颜色
circle	Boolean	true	如果为真，则组件的形状为圆形
handlerIcon	String	-	处理程序的图标
successIcon	String	-	按钮拖到右侧时的处理程序图标
handlerBg	String	#fff	处理程序的背景颜色
textSize	String	20px	提示信息的字体大小

事件#

事件名	说明
passcallback	通过验证时发出，处理程序拖动到右侧。

3、基于vue-drag-verify二次开发的vue组件

注意：需对父元素或html设置user-select: none
github地址：https://github.com/yimijianfang/vue-drag-verify

效果图1#

示例1#

import dragVerify from "vue-drag-verify2";

<drag-verify
  ref="verify1"
  :isPassing="isPassing1"
  :width="400"
  :height="50"
  text="拖拽验证"
  successText="验证成功"
  background="#ccc"
  progressBarBg="#76C61D"
  handlerBg="#edebe9"
  completedBg="#43a047"
  :circle="false"
  radius="15px"
  handlerIcon="el-icon-d-arrow-right"
  successIcon="el-icon-circle-check"
  textSize="16px"
  textColor="#000"
  @passcallback="onPasscallback"
  @passfail="onPassfail"
>
  <i v-show="!isPassing1" slot="textBefore" class="el-icon-lock"></i>
</drag-verify>

效果图2#

示例2#

import dragVerifyImg from "vue-drag-verify-img";

<drag-verify-img
  ref="verify2"
  :isPassing="isPassing2"
  :imgsrc="Img1"
  :width="400"
  :height="50"
  text="拖拽验证"
  successText="验证成功"
  background="#ccc"
  progressBarBg="#76C61D"
  handlerBg="#edebe9"
  completedBg="#43a047"
  :circle="false"
  handlerIcon="el-icon-d-arrow-right"
  successIcon="el-icon-circle-check"
  textSize="16px"
  textColor="#000"
  :barWidth="100"
  :barHeight="50"
  :barRadius="25"
  :showRefresh="true"
  refreshIcon="el-icon-refresh"
  :showTips="true"
  successTip="验证成功"
  failTip="验证失败，拖动滑块将悬浮图像正确合并"
  :diffWidth="10"
  @refresh="reset2"
  @passcallback="onPasscallback"
  @passfail="onPassfail"
/>

效果图3#

示例3#

import dragVerifyImgChip from "vue-drag-verify-img-chip";

<drag-verify-img-chip
  ref="verify3"
  :isPassing="isPassing3"
  :imgsrc="Img2"
  :width="400"
  :height="50"
  text="拖拽验证"
  successText="验证成功"
  background="#ccc"
  progressBarBg="#76C61D"
  handlerBg="#edebe9"
  completedBg="#43a047"
  :circle="false"
  handlerIcon="el-icon-d-arrow-right"
  successIcon="el-icon-circle-check"
  textSize="16px"
  textColor="#000"
  :barWidth="40"
  :barRadius="8"
  :showRefresh="true"
  refreshIcon="el-icon-refresh"
  :showTips="true"
  successTip="验证成功"
  failTip="验证失败，拖动滑块将悬浮图像正确合并"
  :diffWidth="10"
  @refresh="reset3"
  @passcallback="onPasscallback"
  @passfail="onPassfail"
/>

效果图4#

示例4#

import dragVerifyImgRotate from "vue-drag-verify-img-rotate";

<drag-verify-img-rotate
  ref="verify4"
  :isPassing="isPassing4"
  :imgsrc="Img3"
  :width="400"
  :height="50"
  text="拖拽旋转图片"
  successText="验证成功"
  background="#ccc"
  progressBarBg="#76C61D"
  handlerBg="#edebe9"
  completedBg="#43a047"
  :circle="false"
  radius="4px"
  handlerIcon="el-icon-d-arrow-right"
  successIcon="el-icon-circle-check"
  textSize="16px"
  textColor="#000"
  :showRefresh="true"
  refreshIcon="el-icon-refresh"
  :showTips="true"
  successTip="验证成功"
  failTip="验证失败，拖动滑块将悬浮图像正确合并"
  :diffDegree="10"
  :minDegree="90"
  :maxDegree="270"
  @passcallback="onPasscallback"
  @passfail="onPassfail"
/>