Vue封装的极验连接组件

全局定义的变量

let param = {
  baseURL: '/api',//开发
  // baseURL:'',//生产
  jy_sdk: 'gt.js'
}
export {
  param,
}

min.js引入极验

// 极验

require('@/assets/js/' + param.jy_sdk);

Vue.prototype.$initGeetest = initGeetest;

vue封装的极验组件

<template>
  <div>
    <i ref="btn"></i>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parameter: ""
    };
  },
  // 接受父组件传过来的极验参数
  props: ["isGeet"],
  methods: {
    GtCaptcha() {
      let _this = this;
      _this.axios.post(_this.$baseURL + "/utils/geetest_1").then(res => {
        let data = res.data.Data;
        // data = _this.$decryptByDES(data);
        // data = JSON.parse(data);
        var handlerEmbed = function(captchaObj) {
          captchaObj
            .onSuccess(function() {
              var result = captchaObj.getValidate();
              let param = {
                geetest_challenge: result.geetest_challenge,
                geetest_validate: result.geetest_validate,
                geetest_seccode: result.geetest_seccode,
                status: data.status
              };
              // param = JSON.stringify(param);
              // param = _this.$encryptByDES(param);
              if (!result) {
                this.$message.error("error");
              }
              _this.axios
                .post(_this.$baseURL + "/utils/geetest_2", { data: param })
                .then(res => {
                  if (res.data.Code == 200) {
                    let result_2 = res.data.Data;
                    // let result_2 = _this.$decryptByDES(res.data.Data);
                    // result_2 = JSON.parse(result_2);
                    if (result_2.IsPass) {
                      // 向父组件发射事件
                      _this.$emit("geetPath", result_2);
                    }
                  }
                });
            })
            .onError(function() {});
          _this.$refs.btn.addEventListener("click", function demo() {
            _this.$emit("clickChange", false);
            if (_this.isGeet) {
              captchaObj.verify();
            }
          });
        };
        _this.$initGeetest(
          {
            gt: data.geetest.gt,
            challenge: data.geetest.challenge,
            product: "bind",
            offline: !data.geetest.success
          },
          handlerEmbed
        );
      });
    }
  },
  computed: {},
  created() {
    // 页面初始创建，加载极验
    this.GtCaptcha();
  },
  mounted() {},
  watch: {
    // 监听父组件传递的极验参数变化，考虑是否进行极验验证
    isGeet: function() {
      this.$refs.btn.click();
    }
  }
};
</script>
<style scoped>
</style>

父组件调用极验组件

<Geet :isGeet="isGeet" @geetPath="submitForm" @clickChange="isGeetChange"></Geet>

最后

以上就是传统过客最近收集整理的关于Vue封装的极验连接组件的全部内容，更多相关Vue封装内容请搜索靠谱客的其他文章。