更新记录
1.0.3(2024-12-27)
- 修复小程序稳定性
1.0.2(2024-12-11)
- 更新文档
1.0.1(2024-12-11)
- 更新文档
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
× | √ | √ | √ | √ | × | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | √ | √ | - | - |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
滑块拼图验证插件 puzzle-captcha
「体验极致、丝滑流畅」的拼图滑块验证组件,仅需轻轻滑动完成拼图,即可完成安全验证。
纯前端方案,全端兼容(H5/PC/APP/小程序),基于Vue3+ts
快速上手
<template>
<puzzle-captcha :images="images" @success="handleSuccess"></puzzle-captcha>
</template>
<script lang="ts" setup>
const images = ref([
'图片Url 1',//支持网络图片和本地图片
'图片Url 2',
]);
const handleSuccess = ()=>{
console.log('验证通过');
}
</script>
⚠️ 注意
必须给
组件或容器
设置固定宽度
,如果组件大小发生变化,请调用组件reload方法重载组件
Props 属性
- images:
string
图片数组,支持本地路径和网络路径。当数组为空时,组件将显示加载中...
Events 事件
- @success:
()=>void
验证通过事件。通过后,组件将保持在通过状态,如需重新验证可调用组件方法reload
- @fail:
()=>void
验证失败事件。失败后,组件将自动刷新,等待用户重新验证
Methods 方法
- reload(): 通过ref调用reload方法,将刷新组件,等待重新开始验证。