Vue如何用插件实现滑动验证码

这篇文章主要讲解了“Vue如何用插件实现滑动验证码”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue如何用插件实现滑动验证码”吧!

“真诚服务,让网络创造价值”是我们的服务理念,创新互联公司团队10年如一日始终坚持在网站建设领域,为客户提供优质服。不管你处于什么行业,助你轻松跨入“互联网+”时代,PC网站+手机网站+公众号+重庆小程序开发

vue是什么软件

Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

目录

  • 预览

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

  • 安装

    • 更新记录

    • 内置方法

    • props传参(均为可选)

    • 自定义回调函数

    • V1.1.2 版本

    • V1.1.1 描述(此版本有bug,请使用最新版)

    • V1.1.0 版本新增属性`imgs`:

    • 使用方法

    • 注意事项

预览

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

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

Vue如何用插件实现滑动验证码
github文档地址: https://github.com/monoplasty/vue-monoplasty-slide-verify
gitee镜像地址:https://gitee.com/monoplasty/vue-monoplasty-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

{{msg}}
在父组件可以点我刷新哦 // script export default {   name: 'App',   data(){     return {       msg: '',       text: '向右滑',       // 精确度小,可允许的误差范围小;为1时,则表示滑块要与凹槽完全重叠,才能验证成功。默认值为5       accuracy: 1,     }   },   methods: {     onSuccess(){       console.log('验证通过');       this.msg = 'login success'     },     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.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() 方法


// 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验证码匹配成功的回调
failFunction验证码未匹配的回调
refreshFunction点击刷新按钮后的回调函数
againFunction检测到非人为操作滑动时触发的回调函数1.1.2
fulfilledFunction刷新成功之后的回调函数1.1.2

注意事项

目前仅是前端实现

感谢各位的阅读,以上就是“Vue如何用插件实现滑动验证码”的内容了,经过本文的学习后,相信大家对Vue如何用插件实现滑动验证码这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


网页名称:Vue如何用插件实现滑动验证码
URL分享:http://scyanting.com/article/gdgpoo.html