前言：
vue中使用极验验证码，最好是在页面渲染的时候（mounted)进行验证码的初始化，然后在初始化回调中绑定触发弹出验证码的事件。这样在点击按钮或者进行特定操作时能够快速的弹出验证码。
关键代码：
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 var data = data.d 40 initGeetest({ 41 // 以下配置参数来自服务端 SDK 42 gt: data.gtId, 43 challenge: data.gtTrans, 44 offline: data.offline == 1 ? true : false, //极验API服务器是否宕机 false：宕机 45 new_captcha: true, 46 https: 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 log("出错啦，请先完成验证！") 57 } else { 58 log("ok") 59 //验证通过后的业务逻辑 60 //...... 61 } 62 }).onError(function() { 63 console("出错啦，请稍后重试！") 64 //监听验证出错事件，提供用户或者刷新页面重试 65 }).onClose(function() { 66 //对于product为bind形式的验证。当用户关闭弹出来的验证时，会触发该回调。 67 }); 68 }) 69 } 70 }); 71 } 72 } 73 }) 74 </script> 75 76 </html>
如上，在页面渲染的时候就进行验证码初始化，这样在点击按钮的时候就能快速的弹出验证码。但是，如果后端无法拿到uuid，而需要输入手机号码之类的账号进行验证，那么就需要在用户输入手机号码之后才能进行初始化了。这样的话，也就只能再获取到用户输入的手机号之后才能进行验证码初始化了。但是，在用户输入手机号码之后进行初始化，验证码弹窗弹出会有些延迟，在初始化之前进行loading就好了，初始化完成后隐藏loading，体验就会好一些。