千锋扣丁学堂HTML5培训之vue获取验证码倒计时组件

2019-08-26 13:41:38 2860浏览

今天千锋扣丁学堂HTML5培训老师给大家分享一篇关于vue获取验证码倒计时组件的详细介绍，下面我们一起来看一下吧。

<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>

以上就是关于千锋扣丁学堂HTML5培训之vue获取验证码倒计时组件的全部内容，希望对大家的学习有所帮助，想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询。想要学好HTML5开发小编给大家推荐口碑良好的扣丁学堂，扣丁学堂有专业老师制定的HTML5学习路线图辅助学员学习，此外还有与时俱进的HTML5课程体系和HTML5视频教程供大家学习，想要学好HTML5开发技术的小伙伴快快行动吧。扣丁学堂H5技术交流群：673883249。

                             

     【关注微信公众号获取更多学习资料】        【扫码进入HTML5前端开发VIP免费公开课】  

查看更多关于“HTML5开发技术资讯”的相关文章>>