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 相关文章推荐
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 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新手上路(十四)
2006/10/09 PHP
php 删除数组元素
2009/01/16 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
python打开网页和暂停实例
2014/09/30 Python
Python字符串格式化输出方法分析
2016/04/13 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
基于Python的PIL库学习详解
2019/05/10 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Python中SQLite如何使用
2020/05/27 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
关于安全的标语
2014/06/10 职场文书
学习十八大的感悟
2015/08/11 职场文书
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL