vue发送邮箱验证码,倒计时效果的实现—JavaScript通用

页面结构:

<el-col :span="4">
     <el-button type="primary" @click="sendEmail" v-if="!isCountDowning">发送</el-button>
     <el-button type="primary" @click="sendEmail" v-else>{{countText}}</el-button>
</el-col>

data结构:

  data() {
    return {
      countText:'60(S)',
      isCountDowning:false,
    }
  },

参数解释:

countText:倒计时时候显示的文字,会根据函数改变

isCountDowning:是否正在倒计时,用来动态显示按钮

倒计时函数:

这个函数在JavaScript里面通用,更多技巧可以参考MDN文档

    startCountDown(){
      //开始倒计时
      let time = 60;//初始化倒计时的时间为60秒
      this.isCountDowning = true;//是否正在倒计时
      let that = this;//复制this指针,因为下面的函数中会改变
      let intverval = setInterval(function (){
        //执行倒计时内容
        time--;
        if (time <= 0){
          that.isCountDowning = false;
          clearInterval(intverval);//清除倒计时
        }
        that.countText = time + '(S)'
      },1000)
    },

调用函数:

sendEmail(){
      this.checkEmail();
      api.sendVerifyCode(this.registerDate.email,'register').then(res =>{
        //如果发送成功,则开始倒计时
        if (res.code === api.SUCCESS_CODE){
          console.log(res)
          this.startCountDown();
        }else{
          //否则给出提示
          Notice.openNotice(res.message,"出错啦",'error');
        }
      })
    },
版权声明:
作者:北忘山
文章:vue发送邮箱验证码,倒计时效果的实现—JavaScript通用
链接:https://www.beiwangshan.com/archives/281.html
来源:beiwangshan.com
文章版权归作者所有,未经允许请勿转载。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>