ionic-framework - ionic V4 : ion-modal just like ion-alert

Question

如果将输入替换为文本区域，则以下 ion-alert 正是我们所需要的；但是，ion-alert 不支持 ion-textarea。

如何使用 ion-modal 实现完全相同的外观和感觉？

我们使用的是 Ionic，没有 Angular(Ionic 核心)。

ionic 警报代码

 const alert = await alertController.create({
   header: 'Would you be willing to leave feedback?',
   inputs: [
   {
     placeholder: 'enter text'
   }],
   buttons: [
     {
       text: 'Cancel',
       role: 'cancel',
       cssClass: 'secondary',
       handler: _ => {
         alert.dismiss();
         console.log('cancel');
       }
     }, {
       text: 'Submit',
       handler: _ => {
         alert.dismiss();
         console.log('submit');
       }
     }
   ]
 });
 alert.present();

尝试的 ionic 模式代码

const modalController = $('ion-modal-controller')[0];
await modalController.componentOnReady();

const modalElement = await modalController.create({
  showBackdrop: true,
  component:
    $(`<div>
          <h2>Would you be willing to provide feedback?</h2>

          <div>
            <ion-button>Cancel</ion-button>
            <ion-button>Submit</ion-button>
          </div>
      </div>`)[0]
});
await modalElement.present();

Answer 1

在调用模态的页面中:

async book() {
   const modal = await this.modalController.create({
	component: BookModal,
	componentProps: { value: 123 },
	showBackdrop: true,
	backdropDismiss: true,
	cssClass: ['booking-modal']
   });
   return await modal.present();
}

关键点是cssClass。然后在 theme/variable.scss 中，在文件末尾添加类，如下所示:

.booking-modal {
	--height: 50% !important;
}

** 注意:这可能不是正确的方法，但在现阶段它对我有用。寻找更好的解决方案。