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
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传参(均为可选)
参数 | 类型 | 默认值 | 描述 | 版本 |
---|---|---|---|---|
l | Number | 42 | 滑块的边长 | |
r | Number | 10 | 滑块突出圆的半径 | |
w | Number | 310 | canvas画布的宽 | |
h | Number | 155 | canvas画布的高 | |
sliderText | String | Slide filled right | 滑块底纹文字 | 1.0.5 |
imgs | Array | [] | 背景图数组。可不传 | 1.1.0 |
accuracy | Number | 5 | 滑动验证的误差范围 | 1.1.2 |
show | Boolean | true | 是否显示刷新按钮 | 1.1.2 |
自定义回调函数
事件名 | 类型 | 描述 | 版本 |
---|---|---|---|
success | Function | 验证码匹配成功的回调 | |
fail | Function | 验证码未匹配的回调 | |
refresh | Function | 点击刷新按钮后的回调函数 | |
again | Function | 检测到非人为操作滑动时触发的回调函数 | 1.1.2 |
fulfilled | Function | 刷新成功之后的回调函数 | 1.1.2 |
注意事项
目前仅是前端实现
感谢各位的阅读,以上就是“Vue如何用插件实现滑动验证码”的内容了,经过本文的学习后,相信大家对Vue如何用插件实现滑动验证码这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
网页题目:Vue如何用插件实现滑动验证码
标题URL:http://cdiso.cn/article/gdgpoo.html