Vue插件之滑动验证,基于canvas,无其他依赖,兼容IE

感兴趣可关注我的公众号 ruanjianxiaoyu 相互探讨学习,分享更多有趣好玩的东西。记得后台留言哦!

预览

基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录

目前仅前端实现,支持移动端滑动事件。版本V1.1.2

滑动验证
github文档地址: https://github.com/monoplasty/vue-monoplasty-slide-verify
gitee镜像地址:https://gitee.com/monoplasty/vue-monoplasty-slide-verify

Vue3 + Typescript 版本已更新,欢迎伙伴们共创,共同学习交流!

github源码地址:https://github.com/monoplasty/vue3-slide-verify
gitee镜像地址:https://gitee.com/monoplasty/vue3-slide-verify

安装

npm install --save vue-monoplasty-slide-verify

使用方法

// main.js
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);
// template
<slide-verify 
    ref="slideblock"
    @again="onAgain"
    @fulfilled="onFulfilled"
    @success="onSuccess"
    @fail="onFail"
    @refresh="onRefresh"
    :accuracy="accuracy"
    :slider-text="text"
></slide-verify>
<div>{{msg}}</div>

<button @click="handleClick">在父组件可以点我刷新哦</button>
// script
export default {
   name: 'App',
    data(){
        return {
            msg: '',
            text: '向右滑',
            // 精确度小,可允许的误差范围小;为1时,则表示滑块要与凹槽完全重叠,才能验证成功。默认值为5
            accuracy: 1,
        }
    },
    methods: {
        onSuccess(times){
           console.log('验证通过,耗时 +' times + '毫秒');
            this.msg = 'login success, 耗时${(times / 1000).toFixed(1)}s'
        },
        onFail(){
            console.log('验证不通过');
            this.msg = ''
        },
        onRefresh(){
            console.log('点击了刷新小图标');
            this.msg = ''
        },
        onFulfilled() {
            console.log('刷新成功啦!');
        },
        onAgain() {
            console.log('检测到非人为操作的哦!');
            this.msg = 'try again';
            // 刷新
            this.$refs.slideblock.reset();
        },
        handleClick() {
        	// 父组件直接可以调用刷新方法
            this.$refs.slideblock.reset();
        },
    }
}

更新记录

V1.1.5 (2022年7月7日)
  • 针对滑动事件增加节流操作。
  • 提高性能。
V1.1.4 描述
  • 修复传入图片数组取随机数报错问题。@zh-ti gitee issue
  • 优化组件销毁时,对全局事件的移除问题。
V1.1.3 版本

IE11测试结果
IE10测试结果
IE9测试结果

  • 修复 滑块成功后依然能滑动bug
  • 优化 图片未加载完成之前加载遮罩层
  • 增加滑动成功后的时间显示。单位毫秒。issue#24
V1.1.2 版本
  • 修复imgs 参数不传是的warn
V1.1.1 描述(此版本有bug,请使用最新版)
  • accuracy 精度设置

判断滑块与凹槽位置的误差范围值,默认取值范围为 [1, 10]。若取值不为 -1,则会开启检测非人为操作。人为操作也有可能会触发哦!

判断依据是:滑块的一系列移动坐标的平均值和方差是否相等。若相等则人为是非人为操作。

accuracy为 -1,则表示关闭检测非人为操作,默认开启。开启之后,若检测到为非人为操作,则会触发 again 回调函数

V1.1.0 版本新增属性imgs
  • imgs不传或者传空数组时,图片库默认使用第三方api提供的图片路径。可能加载缓慢;
  • imgs传本地路径时,确保图片路径是否正确。建设传cdn上的图片地址。
  • 详情可参考APP.vue上的写法。或在线查看demo地址

内置方法

  • 在父组件里如果需要重置,可以在父组件中调用子组件reset() 方法
<slide-verify ref="slideblock" ></slide-verify>
// javascript  见使用方法
this.$refs.slideblock.reset();

props传参(均为可选)

参数类型默认值描述版本
lNumber42滑块的边长
rNumber10滑块突出圆的半径
wNumber310canvas画布的宽
hNumber155canvas画布的高
sliderTextStringSlide filled right滑块底纹文字1.0.5
imgsArray[]背景图数组。可不传1.1.0
accuracyNumber5滑动验证的误差范围1.1.2
showBooleantrue是否显示刷新按钮1.1.2

自定义回调函数

事件名类型描述版本
successFunction验证码匹配成功的回调1.1.3 新增 返回时间参数,单位为毫秒
failFunction验证码未匹配的回调
refreshFunction点击刷新按钮后的回调函数
againFunction检测到非人为操作滑动时触发的回调函数1.1.2
fulfilledFunction刷新成功之后的回调函数1.1.2

注意事项

目前仅是前端实现,如有什么问题欢迎issue或者留言。感兴趣可关注公众号 ruanjianxiaoyu 相互探讨学习。

评论 155
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值