效果圖
官網(wǎng)：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="向右滑動(dòng)"
@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 = ''
}
}
}
內(nèi)置方法：
- 在父組件里如果需要重置，可以在父組件中調(diào)用子組件
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">在父組件可以點(diǎn)我刷新哦</button>
<div>{{msg}}</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
msg: '',
text: '向右滑動(dòng)->',
// 精確度小，可允許的誤差范圍小；為1時(shí)，則表示滑塊要與凹槽完全重疊，才能驗(yàn)證成功。默認(rèn)值為5
accuracy: 1,
}
},
methods: {
onSuccess(){
console.log('驗(yàn)證通過');
this.msg = 'login success'
},
onFail(){
console.log('驗(yàn)證不通過');
this.msg = ''
},
onRefresh(){
console.log('點(diǎn)擊了刷新小圖標(biāo)');
this.msg = ''
},
onFulfilled() {
console.log('刷新成功啦！');
},
onAgain() {
console.log('檢測到非人為操作的哦！');
this.msg = 'try again';
// 刷新
this.$refs.slideblock.reset();
},
handleClick() {
this.$refs.slideblock.reset();
},
}
}
</script>
