滑动验证插件 SlideVerify 的使用 |
您所在的位置：网站首页 › 浏览器滑动验证怎么取消 › 滑动验证插件 SlideVerify 的使用 |
滑动验证插件 SlideVerify 的使用
|
先看效果图：
源码地址：github文档地址： https://github.com/monoplasty/vue-monoplasty-slide-verify gitee镜像地址：https://gitee.com/monoplasty/vue-monoplasty-slide-verify 使用步骤：1，安装插件： npm install --save vue-monoplasty-slide-verify2，在main.js中使用一下， import Vue from 'vue' import SlideVerify from 'vue-monoplasty-slide-verify'; Vue.use(SlideVerify);3，在页面中使用： {{ msg }} 在父组件可以点我刷新哦 export default { name: "Table", data() { return { puzzleImgList: [ require('../assets/0.jpg'), require('../assets/1.jpg'), require('../assets/2.jpg') ], msg: "", text: "向右滑", // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5 accuracy: 1, }; }, created() { this.lower(); }, methods: { // 验证成功，触发该方法 onSuccess(times) { let ms = (times / 1000).toFixed(1); this.msg = "login success, 耗时 " + ms + "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(); }, handleClose() { // console.log("val", val); }, lower() { console.log("我是home文件的方法"); }, }, }; .aaa { color: red; } .aaa { border: 1px solid blue; }
|
【本文地址】
今日新闻 |
推荐新闻 |