vue中使用极验验证码的方法（附demo）

(编辑：jimmy 日期: 2025/10/29 浏览：3 次 )

前言：

vue中使用极验验证码，最好是在页面渲染的时候（mounted)进行验证码的初始化，然后在初始化回调中绑定触发弹出验证码的事件。这样在点击按钮或者进行特定操作时能够快速的弹出验证码。

关键代码：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=0">
    <title>极验使用实例</title>
  </head>

  <body>
    <div id="app">
      <div class="item">
        <h4>bind（隐藏式）</h4>
        <button id="btn">提交</button>
      </div>
    </div>
  </body>
  <script src="/UploadFiles/2021-04-02/jquery.min.js">

如上，在页面渲染的时候就进行验证码初始化，这样在点击按钮的时候就能快速的弹出验证码。但是，如果后端无法拿到uuid，而需要输入手机号码之类的账号进行验证，那么就需要在用户输入手机号码之后才能进行初始化了。这样的话，也就只能再获取到用户输入的手机号之后才能进行验证码初始化了。但是，在用户输入手机号码之后进行初始化，验证码弹窗弹出会有些延迟，在初始化之前进行loading就好了，初始化完成后隐藏loading，体验就会好一些。
总结
以上所述是小编给大家介绍的vue中使用极验验证码的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

上一篇：微信小程序request请求封装，验签代码实例
下一篇：基于vue-cli3创建libs库的实现方法