关于vue+elementUI中验证码点击倒计时

在vue中加入验证码按钮点击的倒计时。

                                                                 

• 在<template></template>中加入elementUI的按钮样式，

         <el-button
            type="primary"
            @click="iphone"
            size="mini"
            :disabled="disable"
            >{{ buttonName }}</el-button
          >

• 在data中加入buttonName-按钮名称，count-倒计时时长那个，disable-禁止点击状态。

      buttonName: "获取验证码",
      count: 120,
      disable: false,

• 在methods中加入按钮的方法,setInterval()-持续调用方法，判断数字大于1，并减1，结束时clearInterval() 取消由 setInterval() 设置的 timeout。

  iphone() {
       var timeout= setInterval(() => {
        if (this.count < 1) {
          this.disable = false;
          this.buttonName = "获取验证码";
          this.count = 120;
          clearInterval(timeout);
        } else {
          this.disable = true;
          this.buttonName = this.count-- + "s后重发";
        }
      }, 1000);
    },