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

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 主图区域的宽度，单位 px Number 310
canvasHeight 主图区域的高度，单位 px Number 160
puzzleScale 拼图块(小的拼图)的大小比例，0.2 ～ 2 ，数字越大，拼图越大 Number 1
sliderSize 左下角用户拖动的那个滑块的尺寸，单位 px Number 50
range 判断成功的误差范围，单位 px, 滑动的距离和拼图的距离小于等于此值时，会判定重合 Number 10
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"
/>

属性：

参数 说明 类型 默认值
width The width of the component Number 200
height The height of the component Number 60
text The text shows on the component String swiping to the right side
successText The text shows when it’s successful String success
background The background color of the component String #ccc
color The color of the text String #ffffff
progressBarBg The backgound color of the progress bar String #FFFF99
completedBg The backgound color of the component when the button dragged to the right side String #66cc66
circle If true, the shape of component is round Boolean true
handlerIcon The icon of handler String
successIcon The icon of handler when the button dragged to the right side String
handlerBg The background color of the handler String #fff
textSize Font size of prompt message String 20px

事件：

事件名 说明
passcallback Emitted 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"
/>
# javascript
Logo
Vue

前往低代码交流专区

更多推荐

cover

Mac 使用vscode 创建vue项目后修改文件提示：权限不足，以超级用户身份重试

avatar Vue
cover

基于nodejs+vue云计算的城乡医疗卫生服务系统[程序+论文+开题]-计算机毕业设计

avatar Vue
cover

ElasticSearch迁移至openGauss

avatar Vue