### 前言

NuxtJS 让你构建你的下一个 Vue.js 应用程序变得更有信心。这是一个 开源 的框架，让 web 开发变得简单而强大。

![](http://img.blog.itpub.net/blog/2023/04/24/95ef1ad69d291962.png?x-oss-process=style/bb)

### 项目目录

![](http://img.blog.itpub.net/blog/2023/04/24/7361de0fb837d628.png?x-oss-process=style/bb)

### 具体代码

**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://github.com/KgCaptcha)，顺便做了一个演示：[https://www.kgcaptcha.com/demo/](https://www.kgcaptcha.com/demo/)

ITPub博客

基于Nuxt.js框架实现滑动拼图验证码

最新文章