{"id":16773192,"url":"https://github.com/javaluo/vue-puzzle-vcode","last_synced_at":"2025-04-12T22:29:24.658Z","repository":{"id":38451805,"uuid":"161863382","full_name":"javaLuo/vue-puzzle-vcode","owner":"javaLuo","description":"vue 拼图人机验证 右滑拼图验证","archived":false,"fork":false,"pushed_at":"2024-01-25T14:20:16.000Z","size":4265,"stargazers_count":370,"open_issues_count":15,"forks_count":74,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-25T23:42:33.795Z","etag":null,"topics":["puzzle","vcode","verification-code","vue"],"latest_commit_sha":null,"homepage":"https://isluo.com/work/vue-puzzle-vcode/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javaLuo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://raw.githubusercontent.com/javaLuo/javaLuo/master/pay.png"]}},"created_at":"2018-12-15T02:48:40.000Z","updated_at":"2024-06-18T15:31:05.598Z","dependencies_parsed_at":"2024-01-25T15:44:50.287Z","dependency_job_id":null,"html_url":"https://github.com/javaLuo/vue-puzzle-vcode","commit_stats":{"total_commits":67,"total_committers":2,"mean_commits":33.5,"dds":"0.014925373134328401","last_synced_commit":"6391becf5f9c081cd6db3d3df7a01af6c777e31a"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-puzzle-vcode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-puzzle-vcode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-puzzle-vcode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javaLuo%2Fvue-puzzle-vcode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javaLuo","download_url":"https://codeload.github.com/javaLuo/vue-puzzle-vcode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248639449,"owners_count":21137843,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["puzzle","vcode","verification-code","vue"],"created_at":"2024-10-13T06:44:57.425Z","updated_at":"2025-04-12T22:29:24.634Z","avatar_url":"https://github.com/javaLuo.png","language":"Vue","readme":"# vue-puzzle-vcode [![npm](https://img.shields.io/npm/v/vue-puzzle-vcode.svg)](https://www.npmjs.com/package/vue-puzzle-vcode) [![npm downloads](https://img.shields.io/npm/dt/vue-puzzle-vcode.svg)](https://www.npmjs.com/package/vue-puzzle-vcode)\n\nVue 纯前端的拼图人机验证、右滑拼图验证\u003cbr/\u003e 我知道有第 3 方的很好用,比如 GEETEST\n的拼图验证，但要引入 SDK 跟后台配合，还有接口交互。\u003cbr/\u003e 太麻烦了，有时候突然改需求来不及弄，为了应付老板，就弄了个纯前端的随便验一下得了。\n\n**DEMO**: https://isluo.com/work/vue-puzzle-vcode/\n\n![img](public/demo.gif)\n\n\n### [Vue3.x的使用文档在这](README3.md)\n### 以下为Vue2.x使用文档\u003cbr/\u003e\n\n\n### 安装\n\n```node\n  npm install vue-puzzle-vcode --save\n```\n\n### 使用\n\n```vue\nimport Vcode from \"vue-puzzle-vcode\";\n\n\u003cVcode :show=\"isShow\" @success=\"onSuccess\" @close=\"onClose\" /\u003e\n```\n\n### IE\n\n我没加`babel-polyfill`,所以在 IE 里会报错：`SCRIPT1002: 语法错误`（IE 不支持箭头\n函数）\u003cbr/\u003e 需要兼容 IE 的朋友，请直接复制`src/app.vue`和`src/assets`这两个东西\n到自己的项目里，给`app.vue`随便改个名字，就是个普通 vue 组件，直接用即可。\u003cbr/\u003e\n`src/assets`里是一张小图片，`app.vue`中有引用，注意自己匹配一下引用路径\n\n### 最简单例子\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cVcode :show=\"isShow\" @success=\"onSuccess\" @close=\"onClose\" /\u003e\n    \u003cbutton @click=\"submit\"\u003e开始验证\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Vcode from \"vue-puzzle-vcode\";\nexport default {\n  data() {\n    return {\n      isShow: false,\n    };\n  },\n  components: {\n    Vcode,\n  },\n  methods: {\n    submit() {\n      this.isShow = true;\n    },\n\n    onSuccess(msg) {\n      this.isShow = false; // 通过验证后，需要手动关闭模态框\n    },\n\n    onClose() {\n      this.isShow = false;\n    },\n  },\n};\n\u003c/script\u003e\n```\n\n### 参数\n\n| 字段         | 类型    | 默认值             | 说明                                                                          |\n| ------------ | ------- | ------------------ | ----------------------------------------------------------------------------- |\n| show         | Boolean | false              | 是否显示验证码弹框                                                            |\n| canvasWidth  | Number  | 310                | 主图区域的宽度，单位 px                                                       |\n| canvasHeight | Number  | 160                | 主图区域的高度，单位 px                                                       |\n| puzzleScale  | Number  | 1                  | 拼图块(小的拼图)的大小比例，0.2 ～ 2 ，数字越大，拼图越大                     |\n| sliderSize   | Number  | 50                 | 左下角用户拖动的那个滑块的尺寸，单位 px                                       |\n| range        | Number  | 10                 | 判断成功的误差范围，单位 px, 滑动的距离和拼图的距离小于等于此值时，会判定重合 |\n| imgs         | Array   | null               | 自定义图片，见下方例子                                                        |\n| successText  | String  | \"验证通过！\"       | 验证成功时的提示文字                                                          |\n| failText     | String  | \"验证失败，请重试\" | 验证失败时的提示文字                                                          |\n| sliderText   | String  | \"拖动滑块完成拼图\" | 下方滑动条里的文字                                                            |\n\n### 事件\n\n| 事件名  | 返回值 | 说明                                                          |\n| ------- | ------ | ------------------------------------------------------------- |\n| success | 偏差值 | 验证通过时会触发，返回值是用户移动的距离跟目标距离的偏差值 px |\n| fail    | 偏差值 | 验证失败时会触发，返回值同上                                  |\n| close   | null   | 用户点击遮罩层的回调                                          |\n\n### 自定义图片\n\n```vue\n\u003ctemplate\u003e\n  \u003cVcode :imgs=\"[Img1, Img2]\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Img1 from \"~/assets/img1.png\";\nimport Img2 from \"~/assets/img2.png\";\n\nexport default {\n  data() {\n    return {\n      Img1,\n      Img2,\n    };\n  },\n};\n\u003c/script\u003e\n```\n\n- 也可以是网络图片完整 URL 路径，但注意图片跨域问题，因为 canvas api 无法对跨域的图片进行操作\n\n\n### 说明\n\n- 当不传递 imgs 字段或图片加载出错时，会自动生成随机图片\n- 模态框的显示和隐藏完全由父级控制，所以用户通过验证后，需要手动隐藏模态框\n\n### 更新日志\n2022/12/01 - 1.1.10\u003cbr/\u003e\n- 修复：修复了一个在判定过程中关闭模态框导致reset失效的问题\n\n2021/10/18 - 1.1.9\u003cbr/\u003e\n- 修复：修复了在判定状态还未刷新时关闭模态框，重新打开不刷新的问题\n\n2021/10/13 - 1.1.8\u003cbr/\u003e\n- 修复：解决了一个在safari中无法显示拼图块的问题（safari drawImage看起来像是异步操作）\n\n2021/10/12 - 1.1.7\u003cbr/\u003e\n- 修复：重复加载图片的问题\n- 修复：png图片的透明部分现在会用白色填充\n- 更新：初始化时不再自动加载图片，直到show出来时再加载\n- 更新：去掉了无用的id属性\n","funding_links":["https://raw.githubusercontent.com/javaLuo/javaLuo/master/pay.png"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaluo%2Fvue-puzzle-vcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavaluo%2Fvue-puzzle-vcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavaluo%2Fvue-puzzle-vcode/lists"}