简单的elementui倒计时按钮事件

倒计时按钮事件"/>

简单的elementui倒计时按钮事件

html部分

  <el-button :disabled="disableButton" style="width:35%; float: right;" @click="startCountdown"><span>{{ buttonText }}</span></el-button>

初始化:

      disableButton: false,buttonText: '获取验证码',countdown: 60

方法:

methods: {// 验证码发送倒计时startCountdown() {this.disableButton = true;this.buttonText = `${this.countdown}秒后再试`;const timer = setInterval(() => {this.countdown--;this.buttonText = `${this.countdown}秒后再试`;if (this.countdown === 0) {clearInterval(timer);this.disableButton = false;this.buttonText = '获取验证码';this.countdown = 60;}}, 1000);}
}