ionic4学习笔记（七）-- 组件

最新推荐文章于 2020-09-29 22:19:02 发布

盼盼盼

最新推荐文章于 2020-09-29 22:19:02 发布

阅读量449

点赞数

CC 4.0 BY-SA版权

分类专栏：混合APP ionic

本文链接：https://blog.youkuaiyun.com/come0across/article/details/100766955

混合APP 同时被 2 个专栏收录

15 篇文章

订阅专栏

ionic

8 篇文章

订阅专栏

本文详细介绍如何在Ionic框架中使用Alert组件创建各种类型的弹窗，包括简单提示框、确认框及带有多个按钮的对话框，通过具体代码示例展示Alert的各种功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
  }

在这里插入图片描述

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();
  }

在这里插入图片描述

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();
  }

在这里插入图片描述

4.confirm提示框

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

    await alert.present();
  }

在这里插入图片描述