<button style="width: 100%; height: 32px;"
nz-button
[nzType]="btnType"
[(disabled)]="sendBtnTxt!=_checkSendBtnTxt"
(click)="onsendVcode()">
<span translate>{{sendBtnTxt|translate}}</span>
</button>
export class BaSendBtnComponent {
constructor(
private router: Router
) { }
// 接收父级菜单数据list
@Input() btnType="primary"
@Input() sendBtnTxt: any;
@Input() isChange;
@Output() sendVcode: EventEmitter<boolean> = new EventEmitter();
public _checkSendBtnTxt;
private _changeSendBtnTimer;
ngOnInit() {
this._checkSendBtnTxt = this.sendBtnTxt;
}
onsendVcode() {
this.sendVcode.emit();
setTimeout(() => {
if (!this.isChange) {
return
}else{
console.log(111)
this.changeTxt();
}
}, 1000)
}
changeTxt() {
clearInterval(this._changeSendBtnTimer);
let num = 59;
this.sendBtnTxt = '(' + num + 's)';
this._changeSendBtnTimer = setInterval(() => {
num--;
this.sendBtnTxt = '(' + num + 's)';
if (num <= 0) {
// this.sendBtnTxt = "发送"
this.sendBtnTxt = "basciFrwk.email.send"
clearInterval(this._changeSendBtnTimer)
}
}, 1000)
}
ngOnDestroy() {
clearInterval(this._changeSendBtnTimer);
}
}
使用:
<ba-send-btn class="fr"
[(isChange)]="isChangeSendBtnTxt"
style="width:90px;color:#fff;"
[(sendBtnTxt)]="sendBtnTxt"
(sendVcode)="sendVcode()">
</ba-send-btn>
isChangeSendBtnTxt:btn是否可以点击。
sendBtnTxt:“验证码”。
sendVcode:调用发送验证码的接口。
二
<button style="width:96px;height: 40px;vertical-align: middle;"
nz-button
[nzType]="'primary'"
(click)="getCode()"
[disabled]="_btnText!=btnText"
class="text-ellipsis">
<span>{{_btnText}}</span>
</button>
export class BaSendBtnComponent implements OnInit,OnDestroy {
constructor(private authService:AuthService,) { }
@Input() btnText:string='验证码'; // btn显示的名字
@Input() url:string='验证码'; // 发送验证码的接口,可以不用
@Input() time:number=60; // 倒计时时间
@Output() sendCode=new EventEmitter(); // 调用验证码的接口
_btnText=''; // 我该显示的btn名字,会变化的
ngOnInit() {
this._btnText=this.btnText;
}
getCode(){
this.sendCode.emit(); // 可以在父组件处理发送逻辑,也可以组件中处理
// this.authService.verifyCodeForLogin3().then(
// res=>{
// console.log(res);
// }
// )
this.sentTime(); // 倒计时
}
public timer=null;
sentTime(){
let time=this.time||60;
this.timer=setInterval(()=>{
this.time--;
this._btnText=this.time+'秒';
if(this.time<=0){
this._btnText=this.btnText;
clearInterval(this.timer);
}
},1000)
}
ngOnDestroy(){
clearInterval(this.timer);
}
}
<app-ba-send-btn [btnText]="btnText"
[url]="url"
[time]="time"
(sendCode)="sendCode4();">
</app-ba-send-btn>