基于vue的短信验证码倒计时

最新推荐文章于 2024-06-11 07:57:19 发布

ruanhongbiao

最新推荐文章于 2024-06-11 07:57:19 发布

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： vue js

本文链接：https://blog.youkuaiyun.com/qappleh/article/details/89014730

vue.js 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用Vue实现的倒计时按钮组件，该组件适用于短信验证码等场景。通过改变按钮状态展示不同文本，并利用定时器实现倒计时功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做了一个小的demo，分享给大家，在很多地方都能用到。

一般获取短信验证码的时候会用到这个demo：

el-button里面包两个span标签，根据点击状态，显示不同的span，关键代码就是倒计时：

<el-button  type="primary" class="code_btn" style="background: #fff;color: #000;border: 1px solid #999;float: right;margin-top: 10px;" @click.native.prevent="getMessageCode('formData')" :loading="logining">
            <span v-if="!sendMsgDisabled">获取验证码</span>
            <span v-if="sendMsgDisabled">{{codeTime+'秒后获取'}}</span>
          </el-button>

data里设置初始数据：

codeTime: 59, // 发送验证码倒计时
sendMsgDisabled: false, // 是否显示获取验证码按钮

在发送短信验证码接口请求的成功回调函数里：

_this.sendMsgDisabled = true;
 let codeInterval = window.setInterval(function() {
     if ((_this.codeTime--) <= 0) {
           _this.codeTime = 59;
           _this.sendMsgDisabled = false;
           window.clearInterval(codeInterval);
      }
  }, 1000);

好了一个简单的vue倒计时demo效果已经实现了，核心代码是定时器里面，codeTime为0时即倒计时结束，初始化codeTime及切换按钮的显示状态。