clawcatch

抓娃娃风格人机验证码。框架无关，纯 TypeScript 核心 + Vue 3 可选包装。

截图

安装

npm install clawcatch

使用

纯 JS / 任意框架

import { ClawCaptcha } from 'clawcatch'
import 'clawcatch/style.css'

const el = document.getElementById('captcha')
const captcha = new ClawCaptcha(el, {
  target: 'bear',      // 要用户抓取的目标玩具 ID
  locale: 'zh',        // 'en' | 'zh'
  onVerify: () => {
    console.log('通过验证')
  },
})

// 销毁
captcha.destroy()

Vue 3

<script setup>
import { ClawCaptchaVue } from 'clawcatch/vue'
import 'clawcatch/style.css'

function onVerify() {
  console.log('通过验证')
}
</script>

<template>
  <ClawCaptchaVue target="bear" locale="zh" @verify="onVerify" />
</template>

API

ClawCaptcha

new ClawCaptcha(container: HTMLElement, options: ClawCaptchaOptions)

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | target | ToyId | 必填 | 要用户抓取的目标玩具 | | title | string | 按 locale 自动 | 提示标题 | | locale | 'en' | 'zh' | 'en' | 语言 | | assetBase | string | '/toys/' | 玩具图片资源路径 | | className | string | — | 容器额外 class | | onVerify | () => void | — | 验证通过回调 |

ClawCaptchaVue

Vue 组件，props 同 ClawCaptchaOptions，额外事件：

| 事件 | 说明 | |------|------| | @verify | 验证通过 |

Locale

import { LOCALE_MAP } from 'clawcatch'
// { zh: { title: '抓一只xxx', ... }, en: { title: 'Grab the xxx', ... } }

资源文件

项目中需要放置玩具 SVG 图片到 public/toys/（或自定义 assetBase）：

public/toys/
  bear.svg
  cat.svg
  rabbit.svg
  ...

License

MIT