npm i vue-monoplasty-slide-verify
main.js引入
import SlideVerify from 'vue-monoplasty-slide-verify'
Vue.use(SlideVerify)
父组件
<slide-verify ref="slideverify"></slide-verify>
import slideVerify from "./slide-verify"
子组件
<template>
<div style=" 100%; overflow: hidden">
<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>
</div>
</template>
<script>
export default {
name: "slide",
data() {
return {
msg: "",
text: "向右滑动->",
// 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
accuracy: 1,
};
},
methods: {
onSuccess(times) {
console.log("验证通过，耗时" + times + "毫秒");
let time = (times / 1000).toFixed(1);
let msg = "login success, 耗时" + time + "s";
this.msg = msg;
},
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>