效果图
官网：https://gitee.com/monoplasty/vue-monoplasty-slide-verify
- 安装：
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>
export default {
name: 'App',
data(){
return {
msg: '',
}
},
methods: {
onSuccess(){
this.msg = 'login success'
},
onFail(){
this.msg = ''
},
onRefresh(){
this.msg = ''
}
}
}
内置方法：
- 在父组件里如果需要重置，可以在父组件中调用子组件
reset()方法
<slide-verify ref="slideblock" ></slide-verify>
this.$refs.slideblock.reset();
参考如下地址：
<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(){
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();
},
}
}
</script>
