Vue.js图片滑动验证的实现示例
有些网站为了防止有人恶意使用脚本进行批量操作,会设置前后端进行配合的图片滑动验证,本文这里只介绍前端的验证功能。
这里可以直接使用 vue-monoplasty-slide-verify 这个库组件,效果演示如下:
开始使用
库组件下载:
npm install --save vue-monoplasty-slide-verify
main.js中引入全局组件SlideVerify:
import SlideVerify from "vue-monoplasty-slide-verify"; Vue.use(SlideVerify);
使用组件:
<template> <!-- 遮罩层 --> <div class="mask"> <div class="slideContainer"> <slide-verify @success="onSuccess" @fail="onFail" @refresh="onRefresh" @fulfilled="onFulfilled" slider-text="向右滑动验证"> </slide-verify> <div style="margin-top: 15px;">{{ text }}</div> </div> </div> </template> <script> export default { data () { return { text:'' } }, methods:{ onSuccess(times){ this.text = '验证通过,耗时 '+ (times / 1000).toFixed(1) + '秒' }, onFail(){ this.text = '验证失败' }, onRefresh(){ //点击刷新按钮 this.text = '' }, onFulfilled() { //验证失败自动刷新 this.text = '重新验证' }, } } </script> <style scoped> .mask { position: fixed; left: 0%; top: 0%; width: 100%; height: 100%; z-index: 100; overflow: hidden; background-color: rgba(0, 0, 0, 0.5); } .mask .slideContainer { position: absolute; left: 50%; top: 50%; background-color: rgb(255, 255, 255); transform: translate(-50%,-50%); padding: 15px; } </style>
组件对应的参数和回调函数:
tips: 当参数imgs不传或者传空数组时,图片库默认使用第三方api提供的图片路径,可能加载缓慢。
到此这篇关于Vue.js图片滑动验证的实现示例的文章就介绍到这了,更多相关Vue.js图片滑动验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
关于Vue的 watch、computed和methods的区别汇总
这篇文章主要介绍关于Vue的 watch、computed和methods的区别,下面文章将围绕Vue的 watch、computed和methods的续航管资料展开全文它们之间区别的内容,需要的朋友可以参考一下,希望能帮助到大家2021-11-11element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码
这篇文章主要介绍了element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11vue.js与element-ui实现菜单树形结构的解决方法
本文通过实例给大家介绍了vue.js与element-ui实现菜单树形结构,非常不错,具有参考借鉴价值,需要的朋友可以参考下2018-04-04Element-ui table中过滤条件变更表格内容的方法
下面小编就为大家分享一篇Element-ui table中过滤条件变更表格内容的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03vue中如何给el-table-column添加指定列的点击事件
elementui中提供了点击行处理事件,下面这篇文章主要给大家介绍了关于vue中如何给el-table-column添加指定列的点击事件,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-11-11Element Plus的el-tree-select组件懒加载+数据回显详解
el-tree-select组件是el-tree和el-select的结合体,他们的原始属性未被更改,下面这篇文章主要给大家介绍了关于Element Plus的el-tree-select组件懒加载+数据回显的相关资料,需要的朋友可以参考下2022-11-11
最新评论