vue实现滑动验证

效果图：

源码地址：github文档地址： https://github.com/monoplasty/vue-monoplasty-slide-verify

使用步骤：1，安装插件：

npm install --save vue-monoplasty-slide-verify

在main.js中使用一下，

import Vue from 'vue'
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);

在页面中使用：

prop参数说明
参数 类型 备注
l Number 滑块边长
r Number 滑块突出圆形半径
w Number canvas width
h Number canvas height
sliderText String 滑块底部文字
imgs Array picture array 背景图数组，默认值 []
accuracy Number 滑动验证的误差范围，默认值 5
show Boolean 是否显示刷新按钮，默认值 true

回调函数
回调函数 备注
success success callback（返回时间参数，单位为毫秒）
fail fail callback
refresh 点击刷新按钮后的回调函数
again 检测到非人为操作滑动时触发的回调函数
fulfilled 刷新成功之后的回调函数