想在弹窗确认按钮中增加倒计时功能，由于原先使用的是AlertControlle，无法在button下的text位置绑定实时参数，因此采用模态窗口重写alert弹框效果。
预期效果
help.png
首先ionic g page xxxx生成新页面，在app.module.ts声明，在原始页面调用：
openModal(){
const myModal:Modal = this.modalCtrl.create(ModalpagePage, {data:controllStr}, {
//创建模态页面，并传参
cssClass: 'custom-modal'
//cssClass设置弹窗的样式
});
myModal.present();
myModal.onDidDismiss((newData)=>{
//带参的回调函数
});
不想全屏时的样式
.custom-modal {
background-color: rgba(0, 0, 0, .5) !important;
transition: opacity .25s ease-in-out;
padding: 15vh 10vw
}
模态页面的ts
closeModal(){
//退出函数
this.view.dismiss();
}
ionViewDidLoad(){
//接收传过来的参数
this.control =this.navParams.get('data');
this.verifyCode.disable = false;
//弹窗的一瞬间就开始计时，倒计时结束才能点击确定按钮
this.settime();
}
ToControl(){
console.log("you can ");
this.view.dismiss(this.control);
//回调传参
}
//倒计时
settime() {
if (this.verifyCode.countdown == 1) {
//this.verifyCode.countdown = 10;
this.verifyCode.verifyCodeTips = "确定";
this.verifyCode.disable = true;
return;
} else {
this.verifyCode.countdown--;
}
this.verifyCode.verifyCodeTips = "倒计时"+this.verifyCode.countdown+"秒";
setTimeout(() => {
this.verifyCode.verifyCodeTips = "倒计时"+this.verifyCode.countdown+"秒";
this.settime();
},
1000);
}
为控制按钮倒计时时无法点击，在<button>中增加 [disabled]="!verifyCode.disable"
最终效果
QQ图片20180321111052.jpg
