共计 766 个字符,预计需要花费 2 分钟才能阅读完成。
前言
NuxtJS 让你构建你的下一个 Vue.js 应用程序变得更有信念。这是一个 开源 的框架,让 web 开发变得简略而弱小。
我的项目目录
具体代码
page/index.vue
<template>
<div id="app">
<!-- 自定义组件、内容 -->
<form id="form">
token: <input name="token" id="token">
<!-- 凯格行为验证码组件 -->
<div id="captchaBox"></div>
<!-- 凯格行为验证码组件 -->
<button type="submit"> 提交 </button>
</form>
<!-- 自定义组件、内容 -->
</div>
</template>
<script>
export default {
name: 'IndexPage',
head() {
return {
script:[
{
type: 'text/javascript',
src: 'captcha.js?appid=xxx',
body: true
}
]
}
},
beforeCreate () {
// 初始化凯格行为验证码
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/
正文完