预览
基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录
github文档地址: https://github.com/monoplasty/vue-monoplasty-slide-verifygitee镜像地址: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