SweetAlert2：設置對話框高度

Question

對於 sweetAlert2 我注意到沒有“height”屬性但有一個“width”屬性，有沒有辦法將對話框的高度設置為 80%？

謝謝

Answer 1

您必須使用自定義 CSS 類，如下面的代碼片段所示：

 const test = () => { swal({ title: 'Test', customClass: 'swal-height' }); };

 .swal-height { height: 80vh; }

 <script src="https://unpkg.com/sweetalert2@7.1.2/dist/sweetalert2.all.js"></script> <button onclick="test()">test</button>

Answer 2

對我來說自定義 SweetAlert css 的唯一方法是在全局 style.scss 文件中覆蓋它們（包括 !important）。

經驗：

.swal2-popup {
  font-size: 1em !important;
}

Answer 3

從 7.21.0 版開始，添加了一個修復程序。 您可以在 Sweet Alert 選項中添加“heightAuto: false”選項，問題就解決了。

Swal.fire({
    heightAuto: false,
    title: 'Hello,
    Text: 'This is an alert'
});

Answer 4

我正在使用 angular。我從“height:100%”更改為“height:100vh”（在 MainComponent.scss 中）。 這個解決方案對我有用。

<body>
 <app-main>
 </app-main>
</body>

main.component.scss

:host
{height:100vh}