vue图片滑动验证(原创)

所属分类： JQ特效输入验证

查看演示立即下载

插件描述：基于vuedragverify二次开发的vue组件,支持滑动验证，图片滑动验证，转动图片验证

更新时间：2020-09-18 01:15:10

更新说明：新增passfail回调，可在验证失败时重置滑块位置

更新时间：2020-07-05 23:41:19

更新说明：更新文档，优化示例中刷新图片的逻辑。

更新时间：2020-05-14 21:23:31

更新说明：新增图片拼图验证功能

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

需对父元素或html设置user-select: none

使用方法

按需引入对应组件

// 基本滑块验证组件
import dragVerify from "@/components/core/dragVerify";
// 图片滑块组件
import dragVerifyImg from "@/components/core/dragVerifyImg";
// 旋转图片滑块组件
import dragVerifyImgRotate from "@/components/core/dragVerifyImgRotate";
components{
   dragVerify,
   dragVerifyImg,
   dragVerifyImgRotate
}

引入以下代码

<drag-verify
  ref="dragVerify"
  :isPassing.sync="isPassing2"
  text="请按住滑块拖动"
  successText="验证通过"
  handlerIcon="el-icon-d-arrow-right"
  successIcon="el-icon-circle-check"
  >
</drag-verify>

<drag-verify-img 
  ref="sss"
  :imgsrc="t3"
  :isPassing.sync="isPassing"
  :showRefresh="true"
  text="请按住滑块拖动"
  successText="验证通过"
  handlerIcon="el-icon-d-arrow-right"
  successIcon="el-icon-circle-check"
  @refresh="reimg"
  @passcallback="pass"
  >
</drag-verify-img>

<drag-verify-img-rotate 
  ref="sss"
  :imgsrc="logo"  
  :isPassing.sync="isPassing"
  :showTips="true"
  text="请按住滑块拖动"
  successText="验证通过"
  handlerIcon="el-icon-d-arrow-right"
  successIcon="el-icon-circle-check"
  @refresh="reimg"
  >
</drag-verify-img-rotate>

有需求可以在评论里提出来

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：可在线预览Excel的js插件
下一个特效： jquery bootstraps响应式博物馆类网站模板