hannababe
分享文章
新闻分类
vue-monoplasty-slide-verify：vue 滑块验证码组件
文章来自公众号：前端资源推荐
vue-monoplasty-slide-verify 是一个基于 Vue 的滑块验证组件功能插件，提供了简洁的滑块验证功能，支持自定义样式和多种配置选项，帮助开发者轻松集成滑块验证到项目中。
// npm npm install vue-monoplasty-slide-verify --save // import import { createApp } from 'vue'; import App from './App.vue'; import SlideVerify from 'vue-monoplasty-slide-verify'; const app = createApp(App); app.use(SlideVerify); app.mount('#app');
l：Number，滑块的长度。
r：Number，滑块圆角的半径。
w：Number，画布的宽度。
h：Number，画布的高度。
sliderText：String，滑块上的文字，默认值为 "Slide filled right"。
imgs：Array，背景图数组，默认值为 []。
accuracy：Number，滑动验证的误差范围，默认值为 5。
show：Boolean，是否显示刷新按钮，默认值为 true。
vue-monoplasty-slide-verify 事件
success：Function，验证成功时触发的回调函数，返回时间参数，单位为毫秒。
fail：Function，验证失败时触发的回调函数。
refresh：Function，点击刷新按钮后的回调函数。
again：Function，检测到非人为操作滑动时触发的回调函数。
fulfilled：Function，刷新成功之后的回调函数。
<template> <slide-verify @success="onSuccess" @fail="onFail" /> </template> <script> import { SlideVerify } from'vue-monoplasty-slide-verify'; exportdefault { components: { SlideVerify }, methods: { onSuccess() { console.log('验证成功'); }, onFail() { console.log('验证失败'); } } }; </script>
自定义样式：支持自定义样式，开发者可以根据项目需求调整滑块验证的外观。
多种配置：提供多种配置选项，如滑块的宽度、高度、背景颜色等。
事件支持：支持多种事件，如 onSuccess（验证成功时触发）和 onFail（验证失败时触发）。
易于集成：通过简单的安装和配置，即可快速集成到项目中。
[超站]友情链接：
四季很好，只要有你，文娱排行榜：https://www.yaopaiming.com/
关注数据与安全，洞悉企业级服务市场：https://www.ijiandao.com/
关注网络尖刀微信公众号随时掌握互联网精彩
赞助链接
排名
热点
搜索指数
- 1 自贸试验区建设迈上新台阶 7904337
- 2 以色列对伊朗发动袭击 7808733
- 3 以色列城市特拉维夫遭袭 7714420
- 4 外国消费者大赞中国购是全新体验 7618137
- 5 罗帅宇坠楼前曾给两人发短信 7523406
- 6 伊朗革命卫队总司令遇袭身亡 7423900
- 7 招娣改名 意味深长 7327756
- 8 罗帅宇举报材料或涉及多名医生 7233891
- 9 印度一家五口空难前留下最后自拍 7138562
- 10 当当网创始人李国庆官宣离婚进展 7045086
微信
新浪微博
