Vue插件之缺口滑块验证码 适合于手机和pc（插件vuemonoplastyslideverify）

预览

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

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();
},
}
}

内置方法

在父组件里如果需要重置，可以在父组件中调用子组件reset() 方法

<slide-verify ref="slideblock" ></slide-verify>
// 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