189 8069 5689

Vue如何用插件实现滑动验证码-创新互联

这篇文章主要讲解了“Vue如何用插件实现滑动验证码”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue如何用插件实现滑动验证码”吧！

成都创新互联公司网络公司拥有十余年的成都网站开发建设经验，成百上千客户的共同信赖。提供成都网站设计、成都网站制作、网站开发、网站定制、卖链接、建网站、网站搭建、成都响应式网站建设、网页设计师打造企业风格，提供周到的售前咨询和贴心的售后服务vue是什么软件

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

目录

  • 预览

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

  • 安装

    • 更新记录

    • 内置方法

    • props传参（均为可选）

    • 自定义回调函数

    • V1.1.2 版本

    • V1.1.1 描述（此版本有bug,请使用最新版）

    • V1.1.0 版本新增属性`imgs`：

    • 使用方法

    • 注意事项

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

目前仅前端实现，支持移动端滑动事件。版本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


{{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 版本

  • 修复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() 方法


// javascript 见使用方法
this.$refs.slideblock.reset();
props传参（均为可选）
参数类型默认值描述版本
lNumber42滑块的边长
rNumber10滑块突出圆的半径
wNumber310canvas画布的宽
hNumber155canvas画布的高
sliderTextStringSlide filled right滑块底纹文字1.0.5
imgsArray[]背景图数组。可不传1.1.0
accuracyNumber5滑动验证的误差范围1.1.2
showBooleantrue是否显示刷新按钮1.1.2
自定义回调函数
事件名类型描述版本
successFunction验证码匹配成功的回调
failFunction验证码未匹配的回调
refreshFunction点击刷新按钮后的回调函数
againFunction检测到非人为操作滑动时触发的回调函数1.1.2
fulfilledFunction刷新成功之后的回调函数1.1.2
注意事项

目前仅是前端实现

感谢各位的阅读，以上就是“Vue如何用插件实现滑动验证码”的内容了，经过本文的学习后，相信大家对Vue如何用插件实现滑动验证码这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


当前文章：Vue如何用插件实现滑动验证码-创新互联
网站URL：http://jkwzsj.com/article/iochi.html

其他资讯