这篇文章主要讲解了“Vue如何用插件实现滑动验证码”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue如何用插件实现滑动验证码”吧！
成都创新互联公司网络公司拥有十余年的成都网站开发建设经验，成百上千客户的共同信赖。提供
成都网站设计、成都网站制作、网站开发、网站定制、
卖链接、建网站、网站搭建、
成都响应式网站建设、网页设计师打造企业风格，提供周到的售前咨询和贴心的售后服务vue是什么软件
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
目录
预览基于滑动式的验证码，免于字母验证码的繁琐输入 用于网页注册或者登录
目前仅前端实现，支持移动端滑动事件。版本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 版本
V1.1.1 描述（此版本有bug,请使用最新版）
判断滑块与凹槽位置的误差范围值，默认取值范围为 [1, 10]。若取值不为 -1，则会开启检测非人为操作。人为操作也有可能会触发哦！
判断依据是：滑块的一系列移动坐标的平均值和方差是否相等。若相等则人为是非人为操作。
若accuracy为 -1，则表示关闭检测非人为操作，默认开启。开启之后，若检测到为非人为操作，则会触发 again 回调函数
V1.1.0 版本新增属性
imgs：
当imgs不传或者传空数组时，图片库默认使用第三方api提供的图片路径。可能加载缓慢；
当imgs传本地路径时，确保图片路径是否正确。建设传cdn上的图片地址。
详情可参考APP.vue上的写法。或在线查看demo地址
内置方法
// 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://bjjierui.cn/article/iochi.html
