ionic4中Alter弹框的使用 (实用)

分手后的思念是犯贱 2023-06-12 09:43 15阅读 0赞

原文出处：[https://blog.csdn.net/fjxcsdn/article/details/89487482][https_blog.csdn.net_fjxcsdn_article_details_89487482]

第一步，导入并在构造函数中声明

import { AlertController } from '@ionic/angular';//导入弹框

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70][]

第二步，导入方法：

async presentAlert() {
        const alert = await this.alertController.create({
          header: '提示信息',    
          message: '挂失成功...',
          buttons: ['确认']
        });
    
        await alert.present();
      }
    
      async presentAlertMultipleButtons() {
        const alert = await this.alertController.create({
          header: '提示信息!',
          message: '确定退出系统?',
          buttons: [
            {
              text: '取消',
              role: 'cancel',
              cssClass: 'secondary',   //注意自定义class写在全局
              handler: (blah) => {
                console.log('Confirm Cancel: blah');
              }
            }, {
              text: '确定',
              handler: () => { 
                 this.nav.navigateRoot(['/login']);//退出到登陆界面    
              }
            }
          ]
        });
    
        await alert.present();
      }

第三步，调用方法即可  
            ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70 1][]

效果展示：  
                                                  ![20191112110616814.gif][]  
弹出一个表单：

//弹出表单
      async presentAlertPrompt() {
        const alert = await this.alertController.create({
          header: 'Prompt!',
          inputs: [
            {
              name: 'name1',
              type: 'text',
              value: 'hello',
              placeholder: 'Placeholder 1'
            },
            {
              name: 'name3',
              value: 'http://ionicframework.com',
              type: 'url',
              placeholder: 'Favorite site ever'
            },
            // input date with min & max
            {
              name: 'name4',
              type: 'date',
              min: '2017-03-01',
              max: '2018-01-12'
            },
            // input date without min nor max
            {
              name: 'name5',
              type: 'date'
            },
            {
              name: 'name6',
              type: 'number',
              min: -5,
              max: 10
            },
            {
              name: 'name7',
              type: 'number'
            }
          ],
          buttons: [
            {
              text: 'Cancel',
              role: 'cancel',
              cssClass: 'secondary',
              handler: () => {
                console.log('Confirm Cancel');
              }
            }, {
              text: 'Ok',
              handler: (result) => {    //获取表单输入的值
                console.log(result);
              }
            }
          ]
        });
    
        await alert.present();
      }

![20191112110942236.gif][]   
 关于ionic中弹框就先分享到这里。

[https_blog.csdn.net_fjxcsdn_article_details_89487482]: https://blog.csdn.net/fjxcsdn/article/details/89487482
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019111211014033.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191112110517412.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs=,size_16,color_FFFFFF,t_70
[20191112110616814.gif]: https://img-blog.csdnimg.cn/20191112110616814.gif
[20191112110942236.gif]: https://img-blog.csdnimg.cn/20191112110942236.gif