|
效果图
准备
具体实现 项目目录
index.html 项目根目录index.html文件,头部引用KgCaptcha的js。 HTML复制代码 复制代码main.js src/main.js文件中,配置路由。 JS复制代码 import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false // 配置全局路由、组件 new Vue({ el: '#app', router, components: { App }, template: '' }) App.vue src/App.vue文件中,定义html。 HTML复制代码 <template> <div id="app"> <!--自定义组件、内容--> <form id="form"> token: <input name="token" _cke_saved_name="token" _cke_saved_name="token" _cke_saved_name="token" id="token"> <!--凯格行为验证码组件--> <div id="captchaBox"></div> <!--凯格行为验证码组件--> <button type="submit">提交</button> </form> <!--自定义组件、内容--> </div> </template> <script> export default { name: 'App', } //初始化凯格行为验证码 kg.captcha({ // 绑定元素,验证框显示区域 bind: "#captchaBox", // 验证成功事务处理 success: function(e) { console.log(e); kg.$('#token').value = e['token'] }, // 验证失败事务处理 failure: function(e) { console.log(e); }, // 点击刷新按钮时触发 refresh: function(e) { console.log(e); } }); </script> SDK开源地址:https://github.com/KgCaptcha,顺便做了一个演示:https://www.kgcaptcha.com/demo/ | |