代码拉取完成,页面将自动刷新
同步操作将从 monoplasty/vue-monoplasty-slide-verify 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
A Vue plugin to slide verify Demo
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
Using build tools:
npm install --save vue-monoplasty-slide-verify
import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);
<slide-verify :l="42"
:r="10"
:w="310"
:h="155"
slider-text="向右滑动"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
></slide-verify>
<div>{{msg}}</div>
export default {
name: 'App',
data(){
return {
msg: '',
}
},
methods: {
onSuccess(){
this.msg = 'login success'
},
onFail(){
this.msg = ''
},
onRefresh(){
this.msg = ''
}
}
}
Param | Type | Describe | Version |
---|---|---|---|
l | Number | block length | |
r | Number | block circle radius | |
w | Number | canvas width | |
h | Number | canvas height | |
sliderText | String | Slide filled right | 1.0.5 |
imgs | Array | picture array 背景图数组,默认值 [] | 1.1.0 |
accuracy | Number | 滑动验证的误差范围,默认值 5 | 1.1.1 |
show | Boolean | 是否显示刷新按钮,默认值 true | 1.1.1 |
Event | Type | Describe | Version |
---|---|---|---|
success | Function | success callback | 返回时间参数,单位为毫秒 |
fail | Function | fail callback | |
refresh | Function | 点击刷新按钮后的回调函数 | |
again | Function | 检测到非人为操作滑动时触发的回调函数 | 1.1.1 |
fulfilled | Function | 刷新成功之后的回调函数 | 1.1.1 |
accuracy
精度设置判断滑块与凹槽位置的误差范围值,默认取值范围为 [1, 10]。若取值不为 -1,则会开启检测非人为操作。人为操作也有可能会触发哦!
判断依据是:滑块的一系列移动坐标的平均值和方差是否相等。若相等则人为是非人为操作。
若
accuracy
为 -1,则表示关闭检测非人为操作,默认开启。开启之后,若检测到为非人为操作,则会触发again
回调函数
imgs
:imgs
不传或者传空数组时,图片库默认使用第三方api提供的图片路径。可能加载缓慢;imgs
传本地路径时,确保图片路径是否正确。建设传cdn上的图片地址。APP.vue
上的写法。或在线查看demo地址<slide-verify ref="slideblock" ></slide-verify>
this.$refs.slideblock.reset();
imgs
不传时,页面的 warning 问题可参考如下用法:
<template>
<slide-verify ref="slideblock" @again="onAgain" @fulfilled="onFulfilled" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :slider-text="text" :accuracy="accuracy"></slide-verify>
<button @click="handleClick">在父组件可以点我刷新哦</button>
<div>{{msg}}</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
msg: '',
text: '向右滑动->',
// 精确度小,可允许的误差范围小;为1时,则表示滑块要与凹槽完全重叠,才能验证成功。默认值为5
accuracy: 1,
}
},
methods: {
onSuccess(times){
console.log('验证通过,耗时 +' times + '毫秒');
this.msg = 'login success, 耗时${(times / 1000).toFixed(1)}s'
},
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();
},
}
}
</script>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。