关于验证码:基于Nuxtjs框架实现滑动拼图验证码

前言

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/