vue获取验证码倒计时组件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue获取验证码倒计时组件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1407字，纯文字阅读大概需要3分钟。

内容图文

本文实例为大家分享了vue获取验证码倒计时组件，供大家参考，具体内容如下

之前写过一个计时函数，有计算误差，但是验证码的60秒倒计时可以忽略这一点点误差。直接上代码。

<template>
 <div class="captcha-row">
  <input class="captcha-input" placeholder="输入验证码" auto-focus />
  <div v-if="showtime===null" class="captcha-button" @click="send">
   获取验证码
  </div>
  <div v-else class="captcha-button">
   {{showtime}}
  </div>
 </div>
</template>

<script>
export default {
 data() {
  return {
   // 计时器,注意需要进行销毁
   timeCounter: null,
   // null 则显示按钮 秒数则显示读秒
   showtime: null
  }
 },
 methods: {
  // 倒计时显示处理
  countDownText(s) {
   this.showtime = `${s}s后重新获取`
  },
  // 倒计时 60秒 不需要很精准
  countDown(times) {
   const self = this;
   // 时间间隔 1秒
   const interval = 1000;
   let count = 0;
   self.timeCounter = setTimeout(countDownStart, interval);
   function countDownStart() {
    if (self.timeCounter == null) {
     return false;
    }
    count++
    self.countDownText(times - count + 1);
    if (count > times) {
     clearTimeout(self.timeCounter)
     self.showtime = null;
    } else {
     self.timeCounter = setTimeout(countDownStart, interval)
    }
   }
  },
  send() {
   this.countDown(60);
  }
 },
}
</script>

<style lang="less" scoped>
.captcha-row {
 display: flex;
 .captcha-button {
  background: #048fff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rpx 8rpx;
  width: 320rpx;
  border-radius: 4rpx;
 }
}
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的vue获取验证码倒计时组件全部内容，希望文章能够帮你解决vue获取验证码倒计时组件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---