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 相关文章推荐
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
angular 内存溢出的问题解决
Jul 12 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
JS使用setInterval计时器实现挑战10秒
Nov 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
php实现多张图片上传加水印技巧
2013/04/18 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Python闭包函数定义与用法分析
2018/07/20 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
python之拟合的实现
2019/07/19 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
类的核心特性有哪些
2014/01/01 面试题
NULL是什么,它是怎么定义的
2015/05/09 面试题
外包公司软件测试工程师
2014/11/01 面试题
党校自我鉴定范文
2013/10/02 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
Nginx限流和黑名单配置
2022/05/20 Servers