SweetAlert2：设置对话框高度答案

【问题标题】：SweetAlert2: Set dialog heightSweetAlert2：设置对话框高度
【发布时间】：2018-06-04 17:28:26
【问题描述】：

对于 sweetAlert2 我注意到没有“height”属性但有一个“width”属性，有没有办法将对话框的高度设置为 80%？

谢谢

【问题讨论】：

【解决方案1】：

您必须使用自定义 CSS 类，如下面的 sn-p 所示：

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>

【讨论】：

只是对此的更新，当在较新版本的甜蜜警报上使用 customClass 时，您可以使用 customClass 选项的 content 属性更改高度。你可以使用这个 sn-p: swal.fire({ customClass: { content: 'custom-class' } })

【解决方案2】：

对我来说自定义 SweetAlert 的 css 的唯一方法是在全局 styles.scss 文件中覆盖它们（包括 !important）。

exp:

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

【讨论】：

【解决方案3】：

从 7.21.0 版开始，添加了一个修复程序。您可以在 Sweet Alert 选项中添加选项“heightAuto: false”，问题就解决了。

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

【讨论】：