Question

我正在使用SWAL2（Sweet Alert2）来显示警报，并且我想显示一个加载进度微调器，但是对于html，没有文档显示仅一个加载微调器。有一个属性showLoaderOnConfirm，单击确认按钮后，它会显示一个加载微调器。我只想在显示警报时显示加载微调框，并通过html进行设置。

单击“查找” https://sweetalert2.github.io/#ajax-request

时，会发生以下情况：

<button mat-button type="button" [disabled]="paymentModeForm.get('endpoint').value == ''" (click)="testConn.show()" color="primary">
        <mat-icon matPrefix>power</mat-icon>
        <span i18n="@@testConnButton">Test Connection</span>
</button>
<swal #testConn title="Testing connection..." text="Checking the connection to {{paymentMode?.paymentMode}}" [showLoaderOnConfirm]="true"></swal>

使用.TS，我可以做到：

  async testConnection(): Promise<void> {
    Swal.fire({
      title: 'Auto close alert!',
      timer: 3000,
      onBeforeOpen: () => {
        Swal.showLoading()
      }
    })
  }

文档：https://sweetalert2.github.io/#frameworks-integrations

Answer 1

您可以使用甜蜜警报中可用的html描述，并在其中显示加载的gif。

Swal.fire({
  title: 'Auto close alert!',
  timer: 3000,
  html:
    '<img src="https://media.giphy.com/media/xTk9ZvMnbIiIew7IpW/giphy.gif">'
  })

Swal显示加载属性HTML

1 个答案: