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

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

自定义回调函数

注意事项

目前仅是前端实现

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