在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);
},