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 习近平将发表二〇二六年新年贺词 7904141
- 2 2026年国补政策来了 7808738
- 3 东部战区：开火！开火！全部命中！ 7712893
- 4 2026年这些民生政策将惠及百姓 7616985
- 5 小学食堂米线过期2.5小时被罚5万 7519709
- 6 解放军喊话驱离台军 原声曝光 7428214
- 7 为博流量直播踩烈士陵墓？绝不姑息 7327605
- 8 每月最高800元！多地发放养老消费券 7238391
- 9 数字人民币升级 1月1日起将计付利息 7141831
- 10 2026年1月1日起 一批新规将施行 7040675
微信
新浪微博
