溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1.組件中定義兩個變量，分別用于控制按鈕是否可以點擊（countDown）和按鈕上的倒計時數字（countDownTime）：
countDown = false; countDowmTime = 60; // 這里設置倒計時為60S showButtonText = '發送短信驗證碼'； // 可以控制動態改變的按鈕提示信息
2.寫一個獲取短信驗證碼的方法綁定到頁面的獲取短信驗證碼按鈕上：
getCode(event) {
this.validateForm1.controls['phone'].markAsDirty(); // 點擊獲取驗證碼要以輸入了手機號為前提
this.validateForm1.controls['phone'].updateValueAndValidity();
this.userProvider.doSendSMS ({ phone: this.validateForm1.controls.phone.value }).subscribe(res =>{ // 如果手機號驗證通過
if (res) {
this.notice.success('短信驗證碼已發送！');
this.sendMessage(); // 調用下面的按鈕倒計時的方法
}
});
}
sendMessage() { // 發送了短信驗證碼后觸發本方法，開始倒計時
this.countDown = true; // 發送驗證碼后一分鐘內，按鈕變成不可點擊狀態
this.showButtonText = '驗證碼已發送（' +60+ 's）'; // 驗證碼發送后的初始狀態
const start = setInterval(() = > {
if (this.countDownTime >=0 ) {
this.showButtonText = '驗證碼已發送(' + this.countDownTime-- + 's)'; // 動態的進行倒計時
} else {
clearInterval(start); // 如果超時則重新發送
this.showButtonText = '重新發送'；
this.countDown = false; // 按鈕再次變成可點擊狀態
this.countDownTime = 60;
}
}, 1000);
}
3.頁面上用方法中的變量來控制按鈕的顯示效果：
<div >
<button nz-button [disabled]="countDown" (click)="getCode($event)">{{showButtonText}}</button>
.....
</div>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
