Preface:
vue used in extreme test code, it is best to initialize a verification code when the page rendering (mounted), and then bind the triggering event pop-up code in the initialization callback. So that when the button or performing a particular operation to quickly pop codes.
Key Code:
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=0"> 7 <title>极验使用实例</title> 8 </head> 9 10 <body> 11 <div id="app"> 12 <div class="item"> 13 <h4>bind（隐藏式）</h4> 14 <button id="btn">提交</button> 15 </div> 16 </div> 17 </body> 18 <script src="https://magicactivity.oss-cn-hangzhou.aliyuncs.com/activity/common_js/lib/jquery.min.js"></script> <19 script src="http://static.geetest.com/static/tools/gt.js"></script> 20 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 21 <script> 22 let { 23 log 24 } = console 25 Vue.config.silent = false; 26 Vue.config.devtools = true; 27 var app = new Vue({ 28 el: '#app', 29 data: {}, 30 created: function() {}, 31 mounted: function() { 32 this.init() 33 }, 34 methods: { 35 init() { 36 $.ajax({ 37 url: "http://xxx.cn/user/getCheckCode", 38 success: function(data) { 39 varData = data.d 40 initGeetest ({ 41 is // following configuration parameters from the server the SDK 42 is gt: data.gtId, 43 is Challenge: data.gtTrans, 44 is Offline: data.offline == . 1 ? to true : to false , // electrode test API server is down false: down 45 new_captcha: to true , 46 is HTTPS: to false , 47 Product:"bind" // 产品形式，包括：float，popup 48 }, function(captchaObj) { 49 captchaObj.onReady(function() { 50 $("#btn").click(function() { 51 captchaObj.verify(); 52 }) 53 }).onSuccess(function() { 54 var result =captchaObj.getValidate (); 55 IF ( ! Result) { 56 is log ( " ! some errors, complete verification " ) 57 is } the else { 58 log ( " OK " ) 59 // verification by the service logic 60 // ...... 61 is } 62 is }). the onError ( function () { 63 is Console ( "Some errors, please try again later! " ) 64 // listen for validation error event, provide the user or refresh the page to try 65 }). OnClose ( function () { 66 // to bind in the form of validation for the product. When the user closes the pop verification, will trigger the callback. 67 }); 68 }) 69 } 70 }); 71 is } 72 } 73 is }) 74 </ Script > 75 76 </ HTML >
As above, in page rendering when it carried out the initialization code, so you can quickly click on the button when the pop-up code. However, if the backend can not get the uuid, and the need to enter the phone number to verify such accounts, then you need to be initialized after the user enters a phone number. In this case, we can only re-initialization code to verify the phone number after obtaining user input. However, carried out after the user enters the phone number initialization code pop-pop will be some delay, carried out before the initialization like loading, initialization is complete hide loading, the experience will be better.