vue使用人机验证

文档地址：https://luosimao.com/docs/api/56
1、 创建一个组件 NC.vue

<template>
  <div>
    <div
      class="l-captcha"
      data-site-key="e7bceaf02973a42aec42ecb0a4dccd15" 
      data-width="100%"
      data-callback="getResponse"
    ></div>
  </div>
</template>
<script>
export default {
  methods: {
    dynamicLoadJs: function(url, callback) {
      var head = document.getElementsByTagName("head")[0];
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = url;
      if (typeof callback == "function") {
        script.onload = script.onreadystatechange = function() {
          if (
            !this.readyState ||
            this.readyState === "loaded" ||
            this.readyState === "complete"
          ) {
            callback();
            script.onload = script.onreadystatechange = null;
          }
        };
      }
      head.appendChild(script);
    }
  },
  created() {
    const self = this;
    this.dynamicLoadJs("//captcha.luosimao.com/static/js/api.js");
    window.getResponse = (resp) => {
      var els =document.getElementsByName("luotest_response");
      if (els.length === 1 && els[0].value === resp) {
        self.$emit("success", resp);
      } else {
        // eslint-disable-next-line
        LUOCAPTCHA && LUOCAPTCHA.reset();
      }
    }
  }
   
};
</script>

2、需要使用的页面去引入

//使用在要使用的页面引入
    import Validate from "./NC.vue";
        components: {//注册
            Validate
        },
  //页面使用
  <validate @success="success"></validate>
  //定义变量
    form: {
        manmachineToken: ""
      },
  //获取变量
    SetToken(resp) {
       this.form.manmachineToken = resp;
       console.log(resp)
      },