vue图片滑动验证(原创)

亲测可用：

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
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:47:49
理论上不会出现这个问题，因为maincanvas一直是存在的。方便的话可以提交个issues

南洋大师傅0
2020/12/10 11:27:55
根据你的描述，感觉应该是用的vue-drag-verify库。本组件对这个库进行了优化，所以在属性和方法上会有不同。执行命令安装:npm i vue-drag-verify2 -S。

南洋大师傅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/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