.html
<div class="weui-cell__ft">
<button class="weui-vcode-btn" [disabled]="disabled" (click)="getCode($event)">{{tips}}</button>
</div>
.component.ts
public tips = '获取验证码';
public disabled = false;
getCode(event: any) {
let number = 60;
this.disabled = true;
const that = this;
that.tips = number + 's后重新获取';
const timer = setInterval(function () {
number --;
if (number === 0) {
that.disabled = false;
that.tips = '获取验证码';
clearInterval(timer);
} else {
that.tips = number + 's后重新获取';
}
}, 1000);
}
说一下:这里的目的是在setInterval的定时调用方法中更改属性值tips,然后通过数据绑定将倒计时数据展示到模板上。
注意这个const that = this;这里这句并不是多此一举,使用that给当前控制器设置一个别名,在setInterval里面使用that而不是this,如果直接使用this则是指代的window。
在定时完成后需要执行clearInterval()方法,暂停定时器。