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

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是否显示验证码弹框Booleanfalse
canvasWidth主图区域的宽度,单位 pxNumber310
canvasHeight主图区域的高度,单位 pxNumber160
puzzleScale拼图块(小的拼图)的大小比例,0.2 ~ 2 ,数字越大,拼图越大Number1
sliderSize左下角用户拖动的那个滑块的尺寸,单位 pxNumber50
range判断成功的误差范围,单位 px, 滑动的距离和拼图的距离小于等于此值时,会判定重合Number10
imgs自定义图片Array
successText验证成功时的提示文字String“验证通过!”
failText验证失败时的提示文字String“验证失败,请重试”
sliderText下方滑动条里的文字String“拖动滑块完成拼图”

事件:

事件名返回值说明
success偏差值验证通过时会触发,返回值是用户移动的距离跟目标距离的偏差值 px
fail偏差值验证失败时会触发,返回值是用户移动的距离跟目标距离的偏差值 px

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

属性:

参数说明类型默认值
widthThe width of the componentNumber200
heightThe height of the componentNumber60
textThe text shows on the componentStringswiping to the right side
successTextThe text shows when it’s successfulStringsuccess
backgroundThe background color of the componentString#ccc
colorThe color of the textString#ffffff
progressBarBgThe backgound color of the progress barString#FFFF99
completedBgThe backgound color of the component when the button dragged to the right sideString#66cc66
circleIf true, the shape of component is roundBooleantrue
handlerIconThe icon of handlerString
successIconThe icon of handler when the button dragged to the right sideString
handlerBgThe background color of the handlerString#fff
textSizeFont size of prompt messageString20px

事件:

事件名说明
passcallbackEmitted when pass verify, the handler dragged to the right side.

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"
/>
Logo

前往低代码交流专区

更多推荐