Vue插件之滑动验证码

本文实例为大家分享了Vue插件之滑动验证码的具体代码，供大家参考，具体内容如下

预览

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

github文档地址

安装

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 :l="42"
   :r="10"
   :w="310"
   :h="155"
   @success="onSuccess"
   @fail="onFail"
   @refresh="onRefresh"
   :slider-text="text"
   ></slide-verify>
<div>{{msg}}</div>
// script
export default {
 name: 'App',
 data(){
  return {
   msg: '',
   text: '向右滑',
  }
 },
 methods: {
  onSuccess(){
   this.msg = 'login success'
  },
  onFail(){
   this.msg = ''
  },
  onRefresh(){
   this.msg = ''
  }
 }
}

参数说明：

props传参（均为可选）

自定义回调函数：

注意事项：

目前仅是前端实现。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。