Vue如何用插件实现滑动验证码

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

“真诚服务，让网络创造价值”是我们的服务理念，创新互联公司团队10年如一日始终坚持在网站建设领域,为客户提供优质服。不管你处于什么行业，助你轻松跨入“互联网+”时代，PC网站+手机网站+公众号+重庆小程序开发。

vue是什么软件

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

目录

• 预览

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

• 安装

• 更新记录

• 内置方法

• props传参（均为可选）

• 自定义回调函数

• V1.1.2 版本

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

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

• 使用方法

• 注意事项

预览

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

目前仅前端实现，支持移动端滑动事件。版本V1.1.2

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传参（均为可选）

参数	类型	默认值	描述	版本
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

注意事项

目前仅是前端实现

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

分享名称：Vue如何用插件实现滑动验证码
分享地址：http://mswzjz.cn/article/gdgpoo.html