标签: sweetalert2

在我的angular 4项目中，我正在使用带有Sweetalert 2的主题，我想在用户单击确认按钮时调用我的方法，但是看来我无法在then函数中调用任何方法

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then(function () {

  // I want to call my method here but I can't do this.myMethod()

})

我知道这不是棱角分明的甜言蜜语，但有可能使其无需更改就能正常工作吗？

异步收到响应后如何更改文本？

  var swText = "<h3>Importiranje kvota, molimo sa\xc4\x8dekajte...</h3>";\n  swal({ html: swText });\n  swal.showLoading();\n  this.koloService.importExcelFileWithOdds(this.brojKola, fileList)\n      .subscribe(\n          data => { swText = "<h3>Importiranje zavr\xc5\xa1eno!</h3>"; swal.hideLoading(); },\n          error => {  swText = "<h3>Importiranje zavr\xc5\xa1eno!</h3>"; swal.hideLoading(); });\n

另外，在收到服务器响应后如何隐藏进度警报？\n导入数据时进度警报如下所示：\n

在我收到服务器的响应后，进度警报不会隐藏，只有一个“确定”按钮可以关闭警报 - 我希望它在收到服务器的响应后立即关闭。\n

编辑：你误解了。考虑这个伪代码。这基本上是我想要做的，但是当这样写时它不起作用。

使用 Fetch 收到 Laravel 422 响应后，将response不包含实际的 JSON 数据。您必须使用response => response.json()才能访问它。我已经放了一张照片，response我还提供了使用后的输出response => response.json()。

我不想将对象转换为 JSON 字符串。

我在 Laravel 中使用 SweetAlert2。

throw error(response => response.json())

swal({
  title: 'Are you sure you want to add this resource?',
  type: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Submit',
  showLoaderOnConfirm: true,
  allowOutsideClick: () => !swal.isLoading(),
  preConfirm: () => {
    return fetch("/resource/add", {
        method: "POST",
        body: JSON.stringify(data),
        credentials: "same-origin",
        headers: new Headers({
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
          'Content-Type': 'application/json',
          'Accept': 'application/json' …

我要在官方链接中发现 SweetAlert ，所以我想在我的应用程序 angular5 中使用它。

我是这样安装的：

npm install sweetalert --save

我已将它导入到我的组件中：edit-client.component 与此：

  import swal from 'sweetalert';

这是我尝试使用的文件 editClient.component.ts ：

import swal from 'sweetalert';

Component({
  selector: 'app-edit-clients',
  templateUrl: './edit-clients.component.html',
  styleUrls: ['./edit-clients.component.scss']
})
export class EditClientsComponent implements OnInit {

EditClient(){
    this.clientService.updateClient(this.client)
      .subscribe(data=>{
        console.log(data);

        swal('mise a jour effecture !');

        this.router.navigate([ '../../../list' ], { relativeTo: this.activatedRoute });
        },err=>{
        console.log(err);
        alert("Probleme");
      })
  }


}

但是在运行这个例子时，我看不到警报，而是收到一个错误：

RROR TypeError: sweetalert_1.default is not a function
    at SafeSubscriber.eval [as _next] (edit-clients.component.ts:39)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)
    at SafeSubscriber.next (Subscriber.js:187) …

有没有办法将按钮的位置或对齐方式更改为垂直而不是水平？我环顾四周，但除了更改 CSS 的提示之外，找不到任何具体内容。然而，这个选项看起来非常麻烦，并且不确定是否可行。

有人可以帮我吗？

我有模态，当我点击添加账单按钮时，它会弹出sweetalert2，下面提供的代码来自他们的文档，所以我认为代码没有问题，无论如何，我的问题是输入不能通过键入就像残疾人一样，这是materializecss方面的问题吗？

Ps我正在使用一个materializecss css框架，我还阅读了一篇文章，它在引导框架中与我有同样的问题。

https://github.com/sweetalert2/sweetalert2/issues/374

    $(".btnAddBills").click(function(event) {  
swal.mixin({
    input: 'text',
    confirmButtonText: 'Next →',
    showCancelButton: true,
    progressSteps: ['1', '2', '3']
}).queue([
{
    title: 'Question 1',
    text: 'Chaining swal2 modals is easy'
},
'Question 2',
'Question 3'
]).then((result) => {
    if (result.value) {
        swal({
            title: 'All done!',
            html:
            'Your answers: <pre><code>' +
            JSON.stringify(result.value) +
            '</code></pre>',
            confirmButtonText: 'Lovely!'
        })
    }
})

});

我需要通过加载打开 SweetAlert，执行 JS 函数“myFunc()”并关闭 SweetAlert。

我通过加载调用 SweetAlert：

Swal.fire ({\n\xc2\xa0\xc2\xa0 title: \'Wait ...\',\n\xc2\xa0\xc2\xa0 onBeforeOpen: () => {\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 Swal.showLoading ()\n\xc2\xa0\xc2\xa0 }\n})\n

myFunc() 应该放在代码中的什么位置？

我将 Tailwindcss 与 sweetalert2 一起使用。并使用此配置生成警报：

customClass: {
  ...
  image: 'hidden md:inline-block',
},

我使用 ImageUrl 进行警报配置。所以我的swal2-header包含：

<img class="swal2-image hidden md:flex" src="/path/to/image" alt="" style="display: flex;">

由于hidden和md:flex类，我希望图像以小分辨率隐藏并在md断点处变得可见，但内联style="display: flex;"禁用了我的hidden类并且实际上被它替换了。那么如何删除或禁用内联类呢？

我想在 sweet Alert 2 的 swal.text 处断行一些文本。我尝试了 br, \r \n , join(\n\n) 但不适合我！请帮助我解决我的问题。感谢您的帮助：D。这是我的代码

<swal #extractDataDoneSwal
      title="Exported"
      text="Your files have been exported"
      icon="success">
</swal>

if (data == "1") {
  this.exportFile = this.insurerNo.toString() + "_Med.SAT";
  this.loading = false;
  const lines = ['Your files have been exported',this.exportFile];
  this.extractDataDoneSwal.text = lines.join('\n\n');
  this.extractDataDoneSwal.fire();
}

我正在努力将 sweet Alert 2 作为插件集成到 nuxt3 应用程序中。我正在尝试使用vue-sweetalert2但我在某些时候它定义了全局变量。

// Inside the install function
vue.prototype.$swal = swalFunction;
vue['swal'] = swalFunction;

你能帮我，如何访问这些全局变量吗？文档没有表明这一点。

我想目标是在我的插件中添加如下内容：

import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueSweetalert2)

  return {
    provide: {
      swal: swalFunction // <- how to access this ?
    }
  }
})