全局定义的变量
复制代码
1
2
3
4
5
6
7
8let param = { baseURL: '/api',//开发 // baseURL:'',//生产 jy_sdk: 'gt.js' } export { param, }
min.js引入极验
复制代码
1
2
3
4
5// 极验 require('@/assets/js/' + param.jy_sdk); Vue.prototype.$initGeetest = initGeetest;
vue封装的极验组件
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87<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>
父组件调用极验组件
复制代码
1<Geet :isGeet="isGeet" @geetPath="submitForm" @clickChange="isGeetChange"></Geet>
最后
以上就是传统过客最近收集整理的关于Vue封装的极验连接组件的全部内容,更多相关Vue封装内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复