{"_id":"b-captcha-vue","_rev":"6-2f82770645f08ed71a6e336423cf20e9","name":"b-captcha-vue","dist-tags":{"latest":"0.2.4"},"versions":{"0.1.0":{"name":"b-captcha-vue","version":"0.1.0","keywords":["vue3","captcha","b-captcha","Behavioral CAPTCHA"],"_id":"b-captcha-vue@0.1.0","maintainers":[{"name":"carmeltop","email":"carmeltop@hotmail.com"}],"dist":{"shasum":"8e2120898586ead2af425d6856e39f5eff12e837","tarball":"https://registry.npmjs.org/b-captcha-vue/-/b-captcha-vue-0.1.0.tgz","fileCount":6,"integrity":"sha512-NQ82ErLoY5YX82rGLbMJO8sLRct9a4HBQkrjOjCepzEdfGaR8TeynWf58kdA3eq+XR+E3DctE+FQCs76Ny/QuQ==","signatures":[{"sig":"MEUCIBwZA7EXGwhcU2Yg8shyoGHphNf8HtA+t2V2edwO+E0DAiEAzLSvsINK1AeKxqMpXT6P2ftzGPUqTvU/zfA3Qej+LuY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":60147},"main":"./dist/b-captcha.umd.js","type":"module","email":"carmeltop@hotmail.com","module":"./dist/b-captcha.es.js","exports":{".":{"import":"./dist/b-captcha.es.js","require":"./dist/b-captcha.umd.js"},"./style":"./dist/b-captcha-vue.css"},"gitHead":"c1653c4ea40df9fd451f3833016306fca0d09da8","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"carmeltop","email":"carmeltop@hotmail.com"},"_npmVersion":"11.4.1","description":"一个基于 Vue 3 的行为验证码组件库，支持多种验证方式，轻量、易用、可定制。","directories":{},"_nodeVersion":"22.14.0","dependencies":{"vue":"^3.5.24"},"_hasShrinkwrap":false,"devDependencies":{"less":"^4.4.2","vite":"^7.2.4","@vitejs/plugin-vue":"^6.0.1"},"_npmOperationalInternal":{"tmp":"tmp/b-captcha-vue_0.1.0_1764263593505_0.26750200034147076","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"b-captcha-vue","version":"0.2.0","keywords":["vue3","captcha","b-captcha","Behavioral CAPTCHA"],"_id":"b-captcha-vue@0.2.0","maintainers":[{"name":"carmeltop","email":"carmeltop@hotmail.com"}],"dist":{"shasum":"d58cb92e32bc197951ecea980386d3e78fc28256","tarball":"https://registry.npmjs.org/b-captcha-vue/-/b-captcha-vue-0.2.0.tgz","fileCount":6,"integrity":"sha512-8D9Gb48GypnPysnXGREK80z4gwrDG+U7D6x37+FchrVbqDF7A7U/SDEQ1SIzGacJjcCa7CjDUOC0nBSpjF2hOw==","signatures":[{"sig":"MEUCIQCplfXkpbm27LOeUvctJKBq+BgkatbodkWhQmIK+cZTOgIgOibhS7goo8IH+RmPNYzA/Bd9UZmXKeN50GMQ2zkMGXA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":60316},"main":"./dist/b-captcha.umd.js","type":"module","email":"carmeltop@hotmail.com","module":"./dist/b-captcha.es.js","exports":{".":{"import":"./dist/b-captcha.es.js","require":"./dist/b-captcha.umd.js"},"./style":"./dist/b-captcha-vue.css"},"gitHead":"c1653c4ea40df9fd451f3833016306fca0d09da8","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"carmeltop","email":"carmeltop@hotmail.com"},"_npmVersion":"11.4.1","description":"一个基于 Vue 3 的行为验证码组件库，支持多种验证方式，轻量、易用、可定制。","directories":{},"_nodeVersion":"22.14.0","dependencies":{"vue":"^3.5.24"},"_hasShrinkwrap":false,"devDependencies":{"less":"^4.4.2","vite":"^7.2.4","@vitejs/plugin-vue":"^6.0.1"},"_npmOperationalInternal":{"tmp":"tmp/b-captcha-vue_0.2.0_1764263936552_0.8353559156291459","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"b-captcha-vue","version":"0.2.1","keywords":["vue3","captcha","b-captcha","Behavioral CAPTCHA"],"_id":"b-captcha-vue@0.2.1","maintainers":[{"name":"carmeltop","email":"carmeltop@hotmail.com"}],"dist":{"shasum":"5db17b933da94df0b0d87cdab6c2526aa94f96be","tarball":"https://registry.npmjs.org/b-captcha-vue/-/b-captcha-vue-0.2.1.tgz","fileCount":6,"integrity":"sha512-cXJtJFahDpV5LI+kxavbgwrmk2WaR6edkaX0z/Cnju5e2zj6EJ1555NBEgie9U/tFSxm2A/2ILx/PdwxpTYK8w==","signatures":[{"sig":"MEUCIA1chhGejzmmB3SfXJTEJo8nDyekoYJUuXTPvkm1uFpIAiEAzhzhWhcijntLKMNQ2jkwb+GzeJIReMjXS2abHAJvvcg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":60657},"main":"./dist/b-captcha.umd.js","type":"module","email":"carmeltop@hotmail.com","module":"./dist/b-captcha.es.js","exports":{".":{"import":"./dist/b-captcha.es.js","require":"./dist/b-captcha.umd.js"},"./style":"./dist/b-captcha-vue.css"},"gitHead":"c1653c4ea40df9fd451f3833016306fca0d09da8","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"carmeltop","email":"carmeltop@hotmail.com"},"_npmVersion":"11.4.1","description":"一个基于 Vue 3 的行为验证码组件库，支持多种验证方式，轻量、易用、可定制。","directories":{},"_nodeVersion":"22.14.0","dependencies":{"vue":"^3.5.24"},"_hasShrinkwrap":false,"devDependencies":{"less":"^4.4.2","vite":"^7.2.4","@vitejs/plugin-vue":"^6.0.1"},"_npmOperationalInternal":{"tmp":"tmp/b-captcha-vue_0.2.1_1764266867363_0.31200438136415465","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"b-captcha-vue","version":"0.2.2","keywords":["vue3","captcha","b-captcha","Behavioral CAPTCHA"],"_id":"b-captcha-vue@0.2.2","maintainers":[{"name":"carmeltop","email":"carmeltop@hotmail.com"}],"dist":{"shasum":"0145aa1b47f2d3261b2627e0e1fcd59d88292f91","tarball":"https://registry.npmjs.org/b-captcha-vue/-/b-captcha-vue-0.2.2.tgz","fileCount":6,"integrity":"sha512-KkdycaXuypoGAQKauBeMq/ZP5w3OaYi18zZNdIe76f58IFUFRRJwJBpV/x+Jgs8BEOQqf1Ko2H6zyy/i6KSWYg==","signatures":[{"sig":"MEYCIQCy0H4AiJrp4zYeXxSddlVutc8/QaQ/x3VJCZqNEejpeQIhAP2GhDvLL+SRW1XdZN/Q9aABIw7AFTUyHbEtUmnYIl/1","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":60652},"main":"./dist/b-captcha.umd.js","type":"module","email":"carmeltop@hotmail.com","module":"./dist/b-captcha.es.js","exports":{".":{"import":"./dist/b-captcha.es.js","require":"./dist/b-captcha.umd.js"},"./style":"./dist/b-captcha-vue.css"},"gitHead":"b2e37ec5f2b2913850e7f0cc7f3d5ebad470d961","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"carmeltop","email":"carmeltop@hotmail.com"},"_npmVersion":"11.4.1","description":"一个基于 Vue 3 的行为验证码组件库，支持多种验证方式，轻量、易用、可定制。","directories":{},"_nodeVersion":"22.14.0","dependencies":{"vue":"^3.5.24"},"_hasShrinkwrap":false,"devDependencies":{"less":"^4.4.2","vite":"^7.2.4","@vitejs/plugin-vue":"^6.0.1"},"_npmOperationalInternal":{"tmp":"tmp/b-captcha-vue_0.2.2_1764549605030_0.2891162625343129","host":"s3://npm-registry-packages-npm-production"}},"0.2.3":{"name":"b-captcha-vue","version":"0.2.3","keywords":["vue3","captcha","b-captcha","Behavioral CAPTCHA"],"_id":"b-captcha-vue@0.2.3","maintainers":[{"name":"carmeltop","email":"carmeltop@hotmail.com"}],"dist":{"shasum":"30d26e9d84d7c15818d5a44e08baa55751f7fe23","tarball":"https://registry.npmjs.org/b-captcha-vue/-/b-captcha-vue-0.2.3.tgz","fileCount":6,"integrity":"sha512-JBepyBqxm+jm6ehJyOXlHeMKP5z0VLp4ntbWsOEAeWYGWc7N+XuhBKMLsXEVnt2tivJewShMs4N+yf1bjInaVA==","signatures":[{"sig":"MEUCIQCe7q8KYptCJGXk5jL0MX9cuJBP5+7DWSgqbyfSZSwK3wIgC+RuQjsgxgV/BEGqzWncYu6ntxtuUQT4NiYkSmKTfyo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":50995},"main":"./dist/b-captcha.umd.js","type":"module","email":"carmeltop@hotmail.com","module":"./dist/b-captcha.es.js","exports":{".":{"import":"./dist/b-captcha.es.js","require":"./dist/b-captcha.umd.js"},"./style":"./dist/b-captcha-vue.css"},"gitHead":"b2e37ec5f2b2913850e7f0cc7f3d5ebad470d961","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"carmeltop","email":"carmeltop@hotmail.com"},"_npmVersion":"11.4.1","description":"一个基于 Vue 3 的行为验证码组件库，支持多种验证方式，轻量、易用、可定制。","directories":{},"_nodeVersion":"22.14.0","dependencies":{"vue":"^3.5.24"},"_hasShrinkwrap":false,"devDependencies":{"less":"^4.4.2","vite":"^7.2.4","@vitejs/plugin-vue":"^6.0.1"},"_npmOperationalInternal":{"tmp":"tmp/b-captcha-vue_0.2.3_1764558873947_0.4542173575704549","host":"s3://npm-registry-packages-npm-production"}},"0.2.4":{"name":"b-captcha-vue","private":false,"email":"carmeltop@hotmail.com","version":"0.2.4","type":"module","main":"./dist/b-captcha.umd.js","module":"./dist/b-captcha.es.js","exports":{".":{"import":"./dist/b-captcha.es.js","require":"./dist/b-captcha.umd.js"},"./style":"./dist/b-captcha-vue.css"},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"dependencies":{"vue":"^3.5.24"},"devDependencies":{"@vitejs/plugin-vue":"^6.0.1","less":"^4.4.2","vite":"^7.2.4"},"keywords":["vue3","captcha","b-captcha","Behavioral CAPTCHA"],"_id":"b-captcha-vue@0.2.4","gitHead":"b2e37ec5f2b2913850e7f0cc7f3d5ebad470d961","description":"一个基于 Vue 3 的行为验证码组件库，支持多种验证方式，轻量、易用、可定制。","_nodeVersion":"22.14.0","_npmVersion":"11.4.1","dist":{"integrity":"sha512-sFix6IBzcjmMcBMZfkCU6xJtVc0kZ2Dc5PMCL+LWj7iAGAmXIisWDwassMfdm3XNCpXF/veFAVYUkKJm2RkBuw==","shasum":"ca6db94ad1dafe6993e2ebcdf807b7460409774e","tarball":"https://registry.npmjs.org/b-captcha-vue/-/b-captcha-vue-0.2.4.tgz","fileCount":6,"unpackedSize":50093,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDZt8VEuHaAByUtZHf3cR54sq2j7ckBtNt47wkRkFaJbAiA8vR9jc18oHqcBd16iqtm6VoKs8mf18DrePORV1h3VUA=="}]},"_npmUser":{"name":"carmeltop","email":"carmeltop@hotmail.com"},"directories":{},"maintainers":[{"name":"carmeltop","email":"carmeltop@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/b-captcha-vue_0.2.4_1764635368186_0.19821553195608277"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-27T17:13:13.504Z","modified":"2025-12-02T00:29:28.573Z","0.1.0":"2025-11-27T17:13:13.725Z","0.2.0":"2025-11-27T17:18:56.783Z","0.2.1":"2025-11-27T18:07:47.541Z","0.2.2":"2025-12-01T00:40:05.194Z","0.2.3":"2025-12-01T03:14:34.150Z","0.2.4":"2025-12-02T00:29:28.382Z"},"keywords":["vue3","captcha","b-captcha","Behavioral CAPTCHA"],"description":"一个基于 Vue 3 的行为验证码组件库，支持多种验证方式，轻量、易用、可定制。","maintainers":[{"name":"carmeltop","email":"carmeltop@hotmail.com"}],"readme":"# b-captcha-vue\n\n一个基于 Vue 3 的行为验证码组件库，支持多种验证方式，轻量、易用、可定制。\n\n![demo](https://i.postimg.cc/VvLfJ3Tm/20251201111054.jpg)\n\n## 特性\n\n- 🎯 三种验证码类型：点选、旋转、拼图\n- 🎨 支持主题定制（CSS 变量）\n- 📱 支持移动端触摸事件\n- 🔧 灵活的配置项和事件回调\n- 💡 基于 Vue 3 Composition API\n\n## 安装\n\n```bash\nnpm install b-captcha-vue\n# 或\npnpm add b-captcha-vue\n```\n\n## 快速开始\n\n```vue\n<script setup>\nimport { ClickCaptcha, RotateCaptcha, SlideCaptcha } from 'b-captcha-vue'\nimport 'b-captcha-vue/style'\n</script>\n```\n\n## 组件\n\n### 1. ClickCaptcha 点选验证码\n\n用户按顺序点击图片中指定的文字或图标。\n\n```vue\n<template>\n  <ClickCaptcha\n    :data=\"data\"\n    :events=\"events\"\n    :config=\"config\"\n    ref=\"captchaRef\"\n  />\n</template>\n\n<script setup>\nimport { reactive, ref } from 'vue'\n\nconst captchaRef = ref(null)\n\nconst data = reactive({\n  image: 'base64或图片URL', // 主图\n  thumb: 'base64或图片URL', // 提示缩略图\n})\n\nconst config = {\n  width: 400, // 图片宽度\n  height: 340, // 图片高度\n  thumbWidth: 150, // 缩略图宽度\n  thumbHeight: 60, // 缩略图高度\n  title: '请在下图依次点击',\n  buttonText: '验证',\n  iconSize: 22,\n  dotSize: 24, // 点击标记大小\n}\n\nconst events = {\n  click: (x, y) => {\n    console.log('点击坐标:', x, y)\n  },\n  confirm: (dots, reset) => {\n    // dots: [{ key, index, x, y }, ...]\n    console.log('提交验证:', dots)\n    // 验证失败时调用 reset() 重置\n  },\n  refresh: () => {\n    console.log('刷新验证码')\n    // 重新获取验证码数据\n  },\n}\n</script>\n```\n\n### 2. RotateCaptcha 旋转验证码\n\n用户拖动滑块旋转图片至正确角度。\n\n```vue\n<template>\n  <RotateCaptcha\n    :data=\"data\"\n    :events=\"events\"\n    :config=\"config\"\n    ref=\"captchaRef\"\n  />\n</template>\n\n<script setup>\nimport { reactive, ref } from 'vue'\n\nconst captchaRef = ref(null)\n\nconst data = reactive({\n  image: 'base64或图片URL', // 背景图\n  thumb: 'base64或图片URL', // 需要旋转的图片\n  thumbSize: 100, // 旋转图片尺寸\n})\n\nconst config = {\n  width: 400,\n  height: 340,\n  size: 220, // 圆形区域尺寸\n  title: '请拖动滑块完成拼图',\n  iconSize: 22,\n}\n\nconst events = {\n  rotate: (angle) => {\n    console.log('当前角度:', angle)\n  },\n  confirm: (angle, reset) => {\n    console.log('提交角度:', angle)\n    // 验证失败时调用 reset() 重置\n  },\n  refresh: () => {\n    console.log('刷新验证码')\n  },\n}\n</script>\n```\n\n### 3. SlideCaptcha 拖拽拼图验证码\n\n用户直接拖拽拼图块到正确位置（支持任意方向拖动）。\n\n```vue\n<template>\n  <SlideCaptcha\n    :data=\"data\"\n    :events=\"events\"\n    :config=\"config\"\n    ref=\"captchaRef\"\n  />\n</template>\n\n<script setup>\nimport { reactive, ref } from 'vue'\n\nconst captchaRef = ref(null)\n\nconst data = reactive({\n  image: 'base64或图片URL',\n  thumb: 'base64或图片URL',\n  thumbX: 10,\n  thumbY: 80,\n  thumbWidth: 50,\n  thumbHeight: 50,\n})\n\nconst config = {\n  width: 400,\n  height: 340,\n  title: '请拖拽贴图完成拼图',\n  iconSize: 22,\n  scope: true,\n}\n\nconst events = {\n  move: (x, y) => {\n    console.log('拖拽位置:', x, y)\n  },\n  confirm: (point, reset) => {\n    console.log('提交位置:', point)\n  },\n  refresh: () => {\n    console.log('刷新验证码')\n  },\n}\n</script>\n```\n\n## 主题定制\n\n通过 CSS 变量自定义样式：\n\n```css\n:root {\n  --b-captcha-theme-text-color: #333333;\n  --b-captcha-theme-bg-color: #ffffff;\n  --b-captcha-theme-active-color: #3e7cff;\n  --b-captcha-theme-icon-color: #3c3c3c;\n  --b-captcha-theme-drag-bar-color: #e0e0e0;\n  --b-captcha-theme-drag-bg-color: #3e7cff;\n  --b-captcha-theme-drag-icon-color: #ffffff;\n  --b-captcha-theme-loading-icon-color: #3e7cff;\n  --b-captcha-theme-body-bg-color: #34383e;\n  --b-captcha-theme-dot-color-color: #cedffe;\n  --b-captcha-theme-dot-bg-color: #4e87ff;\n  --b-captcha-theme-round-color: #e0e0e0;\n}\n```\n\n## 组件方法\n\n所有组件都暴露了 `refresh` 方法，可通过 ref 调用：\n\n```js\ncaptchaRef.value.refresh()\n```\n\n## 开发\n\n```bash\n# 安装依赖\npnpm install\n\n# 启动开发服务器\npnpm dev\n\n# 构建\npnpm build\n```\n\n## 发布\n\n```bash\nnpm run build\n# 更新 package.json 中的版本号\nnpm adduser --registry=https://registry.npmjs.org\nnpm publish --registry=https://registry.npmjs.org\n```\n\n## 致谢\n\n本项目的开发灵感来自于 [go-captcha-vue](https://github.com/wenlng/go-captcha-vue)，感谢原作者的开源贡献。\n\n## License\n\nMIT\n","readmeFilename":"README.md"}