更新记录

1.0.0（2026-10-29） 下载此版本

• 首个版本：滑块拼图验证码弹窗
• 随机背景图（内置 + imgs 自定义）+ 随机缺口，容差命中判定
• H5 / App-vue（Android、iOS、鸿蒙）/ 微信、支付宝、百度、抖音等小程序全端适配
• 失败抖动重试、成功自动关闭、刷新换题、窄屏等比自适应
• 图片加载失败自动降级程序化渐变背景（离线可用）

平台兼容性

uni-app(5.33)

uni-app x(5.33)

ant-slider-captcha 滑块拼图验证码弹窗

一个参照 vue-puzzle-vcode 交互习惯打造的滑块拼图验证码弹窗组件：随机背景图上挖出一块拼图缺口，拖动底部滑块把拼图块推回缺口，容差内即验证通过。

✨ 特性

• 🧩 经典拼图交互 — 随机背景 + 随机缺口位置 + 失败抖动重试 + 成功自动关闭，与 vue-puzzle-vcode 体验一致
• 📱 全端适配（vue3） — H5、App-vue（Android / iOS / 鸿蒙 app-harmony）、微信/支付宝/百度/抖音等小程序一套代码直接运行
• 🛠 旧版 CanvasContext API — 刻意采用 uni.createCanvasContext 这条全端兼容性最好的 canvas 路径，避开 type="2d" 在 App/鸿蒙上的差异
• 🖼 背景可定制 — 默认内置 4 张动漫风背景（夏日积云飞鸟 / 黄昏落日城市剪影 / 星夜明月流星 / 春日樱花飘落，各 ~15-24KB，PIL 程序化生成无版权顾虑），支持 imgs 传自定义图片（本地/网络/base64）；图片加载失败自动降级为程序化绘制的渐变背景，离线也永远可用
• 📐 窄屏自适应 — 画布超宽时自动等比缩放（含拼图块与容差），小屏设备不破版
• 🧪 纯逻辑可测 — 几何/路径/判定逻辑抽在 common/logic.js，平台无关，可直接 node test/run-slider-captcha.mjs 单测

🚀 快速上手

<template>
  <button @click="show = true">点击验证</button>
  <ant-slider-captcha
    v-model:show="show"
    @success="onSuccess"
    @fail="onFail"
    @close="onClose"
  />
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
const onSuccess = () => uni.showToast({ title: '验证通过', icon: 'success' })
const onFail = () => console.log('验证失败')
const onClose = () => console.log('弹窗关闭')
</script>

组件位于 uni_modules 下，easycom 会自动按 ant-slider-captcha/ant-slider-captcha 路径注册，无需手动 import。也支持 v-model（等价 v-model:show）或仅 :show + @close 两种用法。

📖 API

Props

Events

Methods（通过 ref 调用）

⚠️ 平台差异与说明

• 鸿蒙（app-harmony）：需 HBuilderX 4.22+；组件仅用 canvas 旧 API + touch 事件 + 基础 CSS，均为鸿蒙端已支持能力面。nvue/uvue 页面不支持。
• 网络背景图：小程序/App 端会自动经 uni.getImageInfo 转本地路径后再绘制；H5 端要求图片服务端允许跨域（CORS），否则自动回退程序化背景。
• 安全提示：本组件为纯前端校验（防误触/挡脚本），success 只代表用户完成了拼图。防攻击场景请务必由服务端出题与判题：服务端随机生成背景与缺口并下发，前端把 success 事件的 offset 及轨迹上报，由服务端复核（可扩展 imgs 传入服务端图，并把验证结果交由接口二次确认）。
• 旧版 canvas API 物理分辨率为 css 像素，高分屏下拼图边缘会有轻微模糊，属该 API 的全端共性，不影响识别。

🧪 测试

node test/run-slider-captcha.mjs   # 纯逻辑单测：几何生成 / 路径指令 / 命中判定 / 映射

🙏 致谢

• 交互与视觉参考：vue-puzzle-vcode（MIT）