vue-puzzle
时间: 2023-10-15 20:30:06 浏览: 90
vue-puzzle是一个Vue.js的人机验证组件,它可以用于在前端实现拼图验证码功能。
该组件可以用于替代第三方SDK的拼图验证,避免了引入SDK和后台配合的麻烦。你只需要通过npm安装vue-puzzle-vcode即可开始使用。
使用vue-puzzle-vcode时,你需要在代码中引入Vcode组件并使用它来展示验证模态框。你可以设置show属性来控制模态框的显示与隐藏,通过onSuccess事件来处理用户通过验证后的逻辑,通过onClose事件来处理关闭模态框的逻辑。
在示例中,当用户点击登录按钮时,会触发onSubmit方法,使验证码模态框显示出来。当用户通过验证后,会触发onSuccess方法,你需要在该方法中手动隐藏模态框。当用户点击遮罩层时,会触发onClose方法,你需要在该方法中关闭模态框。
除了以上提到的参数外,vue-puzzle还提供了其他可配置的参数,你可以根据需求进行设置。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue拼图验证组件使用教程](https://blog.csdn.net/weixin_40121676/article/details/102895804)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue 使用vue-puzzle-vcode拼图验证纯前端实现](https://blog.csdn.net/qq_37816525/article/details/102560656)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文