Vue插件之滑动验证码用法详解


Posted in Javascript onApril 05, 2020

本文实例讲述了Vue插件之滑动验证码用法。分享给大家供大家参考,具体如下:

目录

  • 预览
    • 基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录
  • 安装
    • 使用方法
      • 更新记录
        • V1.1.2 版本
        • V1.1.1 描述(此版本有bug,请使用最新版)
        • V1.1.0 版本新增属性`imgs`:
      • 内置方法
      • props传参(均为可选)
      • 自定义回调函数
    • 注意事项

预览

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

目前仅前端实现,支持移动端滑动事件。版本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
<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(){
      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() 方法
<slide-verify ref="slideblock" ></slide-verify>
// 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

注意事项

目前仅是前端实现,如有什么问题欢迎issue或者留言。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
javascript中的delete使用详解
Apr 11 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
前端性能优化及技巧
May 06 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 #Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 #jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 #jQuery
vue中使用v-for时为什么不能用index作为key
Apr 04 #Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 #Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 #Javascript
Vue的data、computed、watch源码浅谈
Apr 04 #Javascript
You might like
理解PHP中的stdClass类
2014/04/18 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
Python获取文件ssdeep值的方法
2014/10/05 Python
Python制作刷网页流量工具
2017/04/23 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
详解HTML5表单新增属性
2016/12/21 HTML / CSS
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
饮料业务员岗位职责
2013/12/15 职场文书
求职导师推荐信范文
2015/03/27 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
Golang 切片(Slice)实现增删改查
2022/04/22 Golang