vue中使用极验验证码，最好是在页面渲染的时候（mounted)进行验证码的初始化，然后在初始化回调中绑定触发弹出验证码的事件。这样在点击按钮或者进行特定操作时能够快速的弹出验证码。
关键代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=0"> <title>极验使用实例</title> </head> <body> <div> <div> <h4>bind（隐藏式）</h4> <button>提交</button> </div> </div> </body> <script src="https://magicactivity.oss-cn-hangzhou.aliyuncs.com/activity/common_js/lib/jquery.min.js"></script> <script src="https://static.geetest.com/static/tools/gt.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let { log } = console Vue.config.silent = false; Vue.config.devtools = true; var app = new Vue({ el: '#app', data: {}, created: function() {}, mounted: function() { this.init() }, methods: { init() { $.ajax({ url: "http://xxx.cn/user/getCheckCode", success: function(data) { var data = data.d initGeetest({ // 以下配置参数来自服务端 SDK gt: data.gtId, challenge: data.gtTrans, offline: data.offline == 1 ? true : false, //极验API服务器是否宕机 false：宕机 new_captcha: true, https: false, product: "bind" // 产品形式，包括：float，popup }, function(captchaObj) { captchaObj.onReady(function() { $("#btn").click(function() { captchaObj.verify(); }) }).onSuccess(function() { var result = captchaObj.getValidate(); if(!result) { log("出错啦，请先完成验证！") } else { log("ok") //验证通过后的业务逻辑 //...... } }).onError(function() { console("出错啦，请稍后重试！") //监听验证出错事件，提供用户或者刷新页面重试 }).onClose(function() { //对于product为bind形式的验证。当用户关闭弹出来的验证时，会触发该回调。 }); }) } }); } } }) </script> </html>
如上，在页面渲染的时候就进行验证码初始化，这样在点击按钮的时候就能快速的弹出验证码。但是，如果后端无法拿到uuid，而需要输入手机号码之类的账号进行验证，那么就需要在用户输入手机号码之后才能进行初始化了。这样的话，也就只能再获取到用户输入的手机号之后才能进行验证码初始化了。但是，在用户输入手机号码之后进行初始化，验证码弹窗弹出会有些延迟，在初始化之前进行loading就好了，初始化完成后隐藏loading，体验就会好一些。
总结
以上所述是小编给大家介绍的vue中使用极验验证码的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: