npm ivue-monoplasty-slide-verify

main.js引入

importSlideVerifyfrom'vue-monoplasty-slide-verify' Vue.use(SlideVerify) 父元件 <slide-verifyref="slideverify"></slide-verify> importslideVerifyfrom"./slide-verify" 子元件 <template> <div> <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> exportdefault{ name:"slide", data(){ return{ msg:"", text:"向右滑動->", //精確度小，可允許的誤差範圍小；為1時，則表示滑塊要與凹槽完全重疊，才能驗證成功。預設值為5 accuracy:1, }; }, methods:{ onSuccess(times){ console.log("驗證通過，耗時"+times+"毫秒"); lettime=(times/1000).toFixed(1); letmsg="loginsuccess,耗時"+time+"s"; this.msg=msg; }, onFail(){ console.log("驗證不通過"); this.msg=""; }, onRefresh(){ console.log("點選了重新整理小圖示"); this.msg=""; }, onFulfilled(){ console.log("重新整理成功啦！"); }, onAgain(){ console.log("檢測到非人為操作的哦！"); this.msg="tryagain"; this.$refs.slideblock.reset(); }, handleClick(){ this.$refs.slideblock.reset(); }, }, }; </script> <stylescoped></style>