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 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
详解JavaScript中return的用法
May 08 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
微信小程序网络层封装的实现(promise, 登录锁)
May 08 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
MYSQL数据库初学者使用指南
2006/11/16 PHP
PHP页面间传递参数实例代码
2008/06/05 PHP
php5新改动之短标记启用方法
2008/09/11 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
Python编程之多态用法实例详解
2015/05/19 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python 专题四 文件基础知识
2017/03/20 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
wxPython实现分隔窗口
2019/11/19 Python
如何使用Pytorch搭建模型
2020/10/26 Python
婴儿地球:Baby Earth
2018/12/25 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
2015年世界艾滋病日活动总结
2015/03/24 职场文书
免职通知
2015/04/23 职场文书
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技