记录vue中实现注册发送手机验证码倒计时效果

发布时间:2024-01-17 18:30

一、初始化

<script>

const TIME_COUNT = 60

export default {
	isshowMsgCode: true,
    timer: null,
    countTime: \'\'
}

二、标签

<el-col :span=\"6\">
  <div class=\"msg_btn\" @click=\"handleMsgVCode\" v-if=\"isshowMsgCode\">
   <span style=\"color: #fff;\">获取短信验证码span>
   div>
   <div class=\"msg_btn\" @click=\"handleMsgVCode\" disabled v-if=\"!isshowMsgCode\">
     <span>{{ countTime }}秒后重新发送span>
   div>
 el-col>

三、逻辑代码

// 计时器
if (!this.timer) {
  this.countTime = TIME_COUNT
  this.isshowMsgCode = false
  this.timer = setInterval(() => {
    if(this.countTime > 0 && this.countTime <= TIME_COUNT) {
      this.countTime--
    } else {
      this.isshowMsgCode = true
      clearInterval(this.timer)
      this.timer = null
    }
  }, 1000)
}

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号