当前位置: 首页 > news >正文

使用插件SlideVerify实现滑块验证

作者gitee地址:https://gitee.com/monoplasty/vue-monoplasty-slide-verify

使用步骤:

1、安装插件

npm install --save vue-monoplasty-slide-verify

2、在main.js中进行配置

import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);

在页面中的用法:

<!-- 滑块验证码 --><el-card class="cover" v-if="loginAdmin.id"><slide-verify :l="42":r="10":w="310":h="155"slider-text="向右滑动":imgs="puzzleImgList"@success="onSuccess"@fail="onFail"@refresh="onRefresh"></slide-verify></el-card>

 在这里因为原来的图片加载非常慢,所以这里使用的是本地图片

export default {name: 'App',data() {return {puzzleImgList: [require("@/static/1.png"),require("@/static/2.png"),],msg: '',}},methods: {onSuccess() {   //滑块验证通过触发Cookies.set("admin", JSON.stringify(this.loginAdmin))this.$notify.success("验证成功");this.$router.push('/')},onFill() {console.log('滑块验证失败');},onRefresh() {console.log("refresh");}}
}

argument

ParamTypeDescribeVersion
lNumberblock length
rNumberblock circle radius
wNumbercanvas width
hNumbercanvas height
sliderTextStringSlide filled right1.0.5
imgsArraypicture array 背景图数组,默认值 []1.1.0
accuracyNumber滑动验证的误差范围,默认值 51.1.1
showBoolean是否显示刷新按钮,默认值 true1.1.1

callBack

EventTypeDescribeVersion
successFunctionsuccess callback返回时间参数,单位为毫秒
failFunctionfail callback
refreshFunction点击刷新按钮后的回调函数
againFunction检测到非人为操作滑动时触发的回调函数1.1.1
fulfilledFunction刷新成功之后的回调函数1.1.1
http://www.lryc.cn/news/524446.html

相关文章:

  • 深入探索 Nginx 的高级用法:解锁 Web 服务器的强大潜能
  • (01)搭建开发环境
  • Win11桌面右键刷新选项在二级界面的修正方法
  • 配电室防静电地板通常用哪种
  • 【重庆市乡镇界】面图层shp格式arcgis数据乡镇名称和编码wgs84坐标无偏移内容测评
  • 68,[8] BUUCTF WEB [RoarCTF 2019]Simple Upload(未写完)
  • Windows电脑桌面记录日程安排的提醒软件
  • TiDB与Oracle:数据库之争,谁能更胜一筹?
  • USART_串口通讯中断案例(HAL库实现)
  • 【MySQL】存储引擎有哪些?区别是什么?
  • [OpenGL]实现屏幕空间环境光遮蔽(Screen-Space Ambient Occlusion, SSAO)
  • linux-NFS网络共享存储服务配置
  • w-form-select.vue(自定义下拉框组件)
  • ovs实现lb负载均衡
  • 机器学习-核函数(Kernel Function)
  • 计算最接近的数
  • 【QNX】QNX侧查看内存信息的方法
  • 逐笔成交逐笔委托Level2高频数据下载和分析:20250121
  • AutoSar架构学习笔记
  • 2024年智慧消防一体化安全管控年度回顾与2025年预测
  • 基于单片机的智能台灯设计
  • HJ108 求最小公倍数(Java版本)
  • 使用tritonserver完成clip-vit-large-patch14图像特征提取模型的工程化。
  • 实操演练第003讲-数据通途:客户端连接SQL Server的完美攻略
  • golang接口
  • LeetCode:37. 解数独
  • 数据结构与算法之递归: LeetCode 37. 解数独 (Ts版)
  • 【氮化镓】香港科技大学陈Kevin-单片集成GaN比较器
  • axios的使用总结
  • 革新未来:高效智能数字人技术引领多元化应用