UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

vue图片滑动验证(原创)

所属分类：输入-验证

 25127  235  查看评论 (31)
分享到微信朋友圈
X
vue图片滑动验证(原创) ie兼容11
 查看演示  website  立即下载

更新时间：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
}

引入以下代码

1.png

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

2.png

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

3.png

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

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

相关插件-验证
查看更多

漂亮的登录注册页+Validate表单验证+自适应手机

 在“漂亮的登录页+滑动弹出框+js正则验证”的基础上，添加自适应样式和优化输入时体验，增加Validate的表单验证
  验证
 82885  772

修改绑定手机号Tab切换样式时间线样式

 时间线形式切换修改绑定手机号，第一步第二步第三步
  验证
 33677  438

滑动验证登录

 用户滑动拖拽图片验证登录加注册
  验证
 59029  423

输入框内容验证插件jquery.input.rule.js

 这是一个文本框内容限制的方法，可以把用户输入的信息进行分类，然后进行判断，如果不符合，则提示错误。
  验证
 35379  330

讨论这个项目（31）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    宋涛 0
    2022/5/20 6:56:15
    请问 怎么使用多张图片，并实现点击刷新按钮切换 回复
    梦落梨花 0
    2021/10/26 10:26:09
    Vue3 引入会报错：

    TypeError: Cannot read properties of undefined (reading '_c') 回复
    F 0
    2021/9/26 15:40:11

    亲测可用：

    npm i vue-drag-verify2 -S  https://www.jq22.com/jquery-info23002
import dragVerify from 'vue-drag-verify2'
 components: { JcRange },

<drag-verify ref="dragVerify" :isPassing.sync="isPassing2" text="请按住滑块拖动"
           successText="验证通过" handlerIcon="el-icon-d-arrow-right"
           successIcon="el-icon-circle-check">
</drag-verify>
    回复
    只有稻草人才能无心 0
    2021/6/22 11:31:45
    请问如何做后端验证，如果是纯前端，那么验证码意义不大 回复
    锐不可当 0
    2020/12/23 20:47:24
    这个插件放到elementui的<el-popover></el-popover>组件里面，图片空白区域和手柄操控的对应空白区域的截图没有展示在正常的地方（表现为不可见）
        锐不可当0
        2020/12/23 20:59:03
        放到<el-dialog></el-dialog>里不会有这个问题
        南洋大师傅0
        2020/12/25 15:02:03
        我在element-ui最新版本中试过了这几个组件，没发现你描述的问题。如果还是有问题欢迎贴代码或提交个issue。
    回复
    夜つ迷つ离り 0
    2020/12/10 11:32:07
    dragVerifyImgChip 这个组件中@load方法在vue里面执行 this.$refs.maincanvas.setAttribute("width", imgWidth);
    this.$refs.maincanvas.setAttribute("height", imgHeight); 这个方法会undifind 好像还没有渲染出来会报错
        南洋大师傅0
        2020/12/10 11:47:49
        理论上不会出现这个问题，因为maincanvas一直是存在的。方便的话可以提交个issues
    回复
    南洋大师傅 0
    2020/12/10 11:28:43
    💖npm安装💖
    // 基本滑块验证组件
    npm i vue-drag-verify2 -S
    // 图片滑块组件
    npm i vue-drag-verify-img -S
    // 基本滑块验证组件(拼图)
    npm i vue-drag-verify-img-chip -S
    // 旋转图片滑块组件
    npm i vue-drag-verify-img-rotate -S 回复
    也么哥丶 0
    2020/12/9 16:16:19
    调用reset方法也报错
        南洋大师傅0
        2020/12/10 11:27:55
        根据你的描述，感觉应该是用的vue-drag-verify库。本组件对这个库进行了优化，所以在属性和方法上会有不同。执行命令安装:npm i vue-drag-verify2 -S。
    回复
    也么哥丶 0
    2020/12/9 16:15:27
    在使用中 默认为圆角的滑块 文档circle值不对 文档是没有更新吗 很多默认值都不对 使用和演示里面不太一样
        南洋大师傅1
        2020/12/9 17:04:28
        1.circle:true会根据滑块高度设置半圆形，如果只是想设置圆角为固定值只需要设置radius就行，因为circle默认值是false。如果你有看源码的话会发现circle优先级大于radius。
        2.演示中适当修改了属性，可以展开源码查看
        3.demo中的reset方法是没有报错的，建议赋值demo试试，如果还有问题再把详细报错贴一下，方便排查🌹
        也么哥丶0
        2020/12/9 17:50:18
        <template>
 <div>
   <drag-verify ref="dragVerify7" :width="300" :isPassing.sync="isPassing7"  text="请按住滑块拖动"  successText="验证通过"
     handlerIcon="el-icon-d-arrow-right"
     successIcon="el-icon-circle-check"
     @passcallback="passcallback3" >
   </drag-verify>
    <el-button style="margin-top:5px;" size="small" @click="reset">还原</el-button>
 </div>
</template>

<script>
    import dragVerify from 'vue-drag-verify'
    export default {
        data() {
            return {
                isPassing7: false
            }
        },
        components: {
            dragVerify
        },
        methods: {
            passcallback3() {
                this.$message({
                    message: "验证通过",
                    type: "success"
                });
            },
            reset() {
                this.isPassing7 = false;
                this.$refs.dragVerify7.reset()
            },
        },
    }
</script>
        也么哥丶0
        2020/12/9 17:55:01
        代码直接复制的 并没有使用circle属性 运行起来是圆形的 默认值不对 点击还原出发reset方法 报错 Error in v-on handler: "TypeError: this.$refs.dragVerify7.reset is not a function" 并且在滑动过程中背景为淡黄色 滑动完成以后背景色缓慢变成绿色
        也么哥丶0
        2020/12/9 17:59:39

        代码直接复制的 并没有使用circle属性 运行起来两侧是圆形的 默认值不对 实际上circle默认值是true了 点击还原触发reset方法 报错

        Error in v-on handler: "TypeError: this.$refs.dragVerify7.reset is not a function"

        并且在滑动过程中背景为淡黄色 滑动完成以后背景色缓慢变成绿色 文档没有看到有背景延迟之类的属性 未解锁状态也没有出现‘流光’效果  请问是怎么弄的

        南洋大师傅0
        2020/12/10 11:26:47
        根据你的描述，感觉应该是用的vue-drag-verify库。本组件对这个库进行了优化，所以在属性和方法上会有不同。执行命令安装:npm i vue-drag-verify2 -S。其他包地址是：
        // 基本滑块验证组件
        npm i vue-drag-verify2 -S
        // 图片滑块组件
        npm i vue-drag-verify-img -S
        // 基本滑块验证组件(拼图)
        npm i vue-drag-verify-img-chip -S
        // 旋转图片滑块组件
        npm i vue-drag-verify-img-rotate -S
    回复
    ?小斌 0
    2020/12/5 10:50:01
    直接安装npm install vue-drag-verify --save就行了嘛
        南洋大师傅0
        2020/12/10 10:30:04
        // 基本滑块验证组件
        npm i vue-drag-verify2 -S
        // 图片滑块组件
        npm i vue-drag-verify-img -S
        // 基本滑块验证组件(拼图)
        npm i vue-drag-verify-img-chip -S
        // 旋转图片滑块组件
        npm i vue-drag-verify-img-rotate -S
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复