更新记录

1.0.2（2024-12-11） 下载此版本

• 更新文档

1.0.1（2024-12-11） 下载此版本

• 更新文档

1.0.0（2024-12-11） 下载此版本

• 首次发布

平台兼容性

滑块拼图验证插件 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方法，将刷新组件，等待重新开始验证。