使用SweetAlert2显示加载提醒,而无需进行交互

时间:2017-05-13 20:22:02

标签: typescript promise sweetalert sweetalert2

现在我有了这段代码:

swal({
     title: 'Loading cars from data base',
     showLoaderOnConfirm: true,
     preConfirm: () => {
       return this.carsSvc.getCars().then((cars: ICar[]) => {
               this.setData(cars);
               resolve();
            });
    }
});

此代码显示提醒,我必须按'确认'然后它显示一个加载图标,并在加载完成时关闭。 我只想要这个动作的最后一部分,所以我不想在开始加载之前确认加载。我希望在打开警报时启动加载,并在加载完成时自动关闭。这可能是SweetAlert2吗?

3 个答案:

答案 0 :(得分:6)

您也可以使用

            Swal.fire({
                title: 'Please Wait !',
                html: 'data uploading',// add html attribute if you want or remove
                allowOutsideClick: false,
                onBeforeOpen: () => {
                    Swal.showLoading()
                },
            });

并关闭它

swal.close();

答案 1 :(得分:3)

可能有点晚了,但我想出来了。试试这个:

swal({
     title: 'Loading cars from data base'
});
swal.showLoading();

this.carsSvc.getCars().then((cars: ICar[]) => {
           swal.close();
           this.setData(cars);
           // show a new success swal here?
        });

您想调用swal.showLoading()方法来禁用按钮。然后,您可以致电swal.close()完成。

答案 2 :(得分:2)

你可以试试用这个...

Swal.fire({
  title: 'Uploading...',
  html: 'Please wait...',
  allowEscapeKey: false,
  allowOutsideClick: false,
  didOpen: () => {
    Swal.showLoading()
  }
});