ionic4学习笔记(七)-- 组件

1.alert

1,实现j简单提示框,2秒钟之后消失
import { AlertController } from '@ionic/angular';

 constructor(public alertController: AlertController) { }
 async presentAlert() {
    const alert = await this.alertController.create({
      header: '提示',
      message: 'This is an alert message.'
    });

    await alert.present();

    setTimeout(()=>{
      this.alertController.dismiss()
    },2000)
  }

ionic4学习笔记(七)-- 组件_第1张图片

2.alert提示框
import { AlertController } from '@ionic/angular';

 constructor(public alertController: AlertController) { }
 async presentAlert() {
    const alert = await this.alertController.create({
     header: '提示',
      message: '确定关闭此次会话吗?',
      buttons: ['确定']
    });
    await alert.present();
  }

ionic4学习笔记(七)-- 组件_第2张图片

3.多按钮弹出框
async presentAlert() {
    const alert = await this.alertController.create({
      header: 'Alert',
      subHeader: 'Subtitle',
      message: 'This is an alert message.',
      buttons: ['Cancel', 'Open Modal', 'Delete']
    });
    await alert.present();
  }

ionic4学习笔记(七)-- 组件_第3张图片

4.confirm提示框
async presentAlertConfirm() {
    const alert = await this.alertController.create({
      header: 'Confirm!',
      message: 'Message text!!!',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: 'Okay',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    });

    await alert.present();
  }

ionic4学习笔记(七)-- 组件_第4张图片

你可能感兴趣的:(混合APP,ionic)