标签: sweetalert2

大约 5 天前还在工作，刚进入该网站，它就不再工作了，检查 Chrome 控制台并发现此错误。

其余代码工作正常，一切都会按预期弹出。.then 刚刚崩溃了。不确定是否由于更新。

任何人都可以看到出了什么问题吗？我是 JS、Jquery 等新手。

未捕获的类型错误：无法读取 Object.success ((index):204) 处未定义的属性“then” at c (jquery-3.4.1.min.js:2) at Object.fireWith [as resolveWith] (jquery-3.4. 1.min.js:2) 在 l (jquery-3.4.1.min.js:2) 在 XMLHttpRequest。(jquery-3.4.1.min.js:2)

这是正在运行的代码

<link href="https://cdn.rawgit.com/t4t5/sweetalert/32bd141c/dist/sweetalert.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="https://cdn.rawgit.com/t4t5/sweetalert/32bd141c/dist/sweetalert.min.js"></script>

<script type="text/javascript" language="javascript"> 
$(document).ready(function() {
addListItem();

     }); 
function addListItem(){
        $.get("https://www.cloudflare.com/cdn-cgi/trace",     function(data) { 
            arrayOfLines = data.match(/[^\r\n]+/g);
            var arrayLength = arrayOfLines.length;
            for (var i = 0; i < arrayLength; i++) {
                if(arrayOfLines[i].startsWith("loc")){
                    var countCode = arrayOfLines[i].split("=")[1]
                    var countName = getCountryName(countCode);
                    if(countCode != "US"){
                    swal({

                        title: …

我想向SweetAlert2输入类型选择添加动态选项，如下所示：

swal({
title: 'Select Ukraine',
input: 'select',
inputOptions: {
  'SRB': 'Serbia',
  'UKR': 'Ukraine',
  'HRV': 'Croatia'
},
inputPlaceholder: 'Select country',
showCancelButton: true,
inputValidator: function(value) {
  return new Promise(function(resolve, reject) {
    if (value === 'UKR') {
      resolve();
    } else {
      reject('You need to select Ukraine :)');
    }
  });
}
}).then(function(result) {
  swal({
    type: 'success',
    html: 'You selected: ' + result
  });
})

我想添加我自己保存在对象中的选项，而不是这 3 个国家。我怎样才能使用 javascript 做到这一点？

我想问一下如何用icon图像更改sweetalert图像？

我尝试过使用来自 的图像更改icon图像，但它不起作用Swal.fireassets

这是脚本

Swal.fire({
    icon: "<?= base_url(); ?>assets/addon-media/icon_information.png",
    html: "Are you sure want to add this ?",
    showCancelButton: true,
    confirmButtonText: 'Yes, Sure',
    cancelButtonText: 'No, Cancel',
})

我有一个允许文本输入的SweetAlert2,我给它一个默认值.当警报弹出时,我希望突出显示此默认值,以便用户可以在需要时立即覆盖它.这是一个例子:

以下是我使用sweetAlert选项调用的函数:

window.sweetPrompt = function (title, message, callback, input, keepopen, allowOutsideClick, allowEscapeKey) {
    sweetAlert({
        title: title,
        text: message,
        input: 'text',
        confirmButtonColor: "#428bca",
        preConfirm: function(text) {
            return new Promise(function(resolve) {
                if (!keepopen) {
                    resolve();
                } else {
                    callback(text);
                }
            });
        },
        inputValidator: function(text) {
            return new Promise(function (resolve, reject) {
                if (text) {
                    resolve();
                } else {
                    reject('Cannot be empty!');
                }
            });
        },
        inputValue: input,
        showCancelButton: true,
        reverseButtons: true,
        allowOutsideClick: allowOutsideClick,
        allowEscapeKey: allowEscapeKey
    }).then(callback, function(dismiss){});
};

我将如何做到这一点(如果可能的话)？我想过使用jQuery,但我不知道如何获得sweetAlert对话的引用.任何建议,将不胜感激.

当用户在我的网站上发布评论时，我正在使用sweetalert2脚本，它向下滚动到他们的评论并弹出甜蜜警报，但是当他们在甜蜜警报框中单击“确定”时，它将向上滚动回到顶部。

从我一直在阅读的书中，我需要某种preventdefault或类似的东西，但是我不知道那会去哪里？

这是我的脚本：

<!-- Sweet alert -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.8/sweetalert2.min.js"></script>
<script>
window.location.hash = "comment-<?php echo $newcommentid; ?>";
 $(document).ready(function () {
    swal({
                title: "Comment Posted",
                text: "Thanks, your comment has now been successfully posted.",
                type: "success"
            });
 });     

</script>

我正在使用SweetAlert2示例页面的确切代码:

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((result) => {
  if (result.value) {
    swal(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

适用于Firefox和Chrome,但是Internet Explorer显示SCRIPT1002: Syntax Error并且不运行脚本... IE将此部分标记为语法错误:

}).then((result) => {

谢谢你的帮助

我正在将我的一个项目迁移到 TypeScript，在那个项目SweetAlert2 中库。

导入 SweetAlert2（JS 和 CSS）的默认方式是

import Swal from 'sweetalert2'

这适用于 TypeScript，因为库中有类型：https : //github.com/sweetalert2/sweetalert2/blob/master/sweetalert2.d.ts

但在我的项目中，导入的方式是这样的：

import Swal from 'sweetalert2/dist/sweetalert2.js'

这仅用于 JS 导入，没有样式。使用这种类型的导入，我收到 TS 错误：

Could not find a declaration file for module 'sweetalert2/dist/sweetalert2.js'. 

ts(7016)

我试图复制sweetalert2/sweetalert2.d.ts到sweetalert2/dist/sweetalert2.d.ts，但遇到另一个错误：

File 'node_modules/sweetalert2/dist/sweetalert2.d.ts' is not a module. 

ts(2306)

这里发生了什么，为什么 TS 抱怨dist/sweetalert2.d.ts不是模块？

我使用 SweetAlert2 v8 和 animate.css 来更改弹出动画。我使用的动画是 fadeInRight。我还使用链式警报，并希望将关闭动画更改为 fadeOutLeft 以使其在页面上滑动的效果。

我添加 animate.css 类的方式是使用 customClass popup 属性。

我试过了：

• 使用 onClose 添加类
• 使用 onOpen 删除 fadeIn 类，然后使用 onClose 添加 fadeOut 类

这两种方法似乎都不起作用。如果有人知道如何更改关闭动画，将不胜感激。

谢谢

例如，我想知道是否有一种方法可以使角度组件在甜蜜的警报框中打开

 Swal.fire(
  {
    HTML: '<app-exampleselector></app-exampleselector>',
  })

我的目的是使用组件选择器，而不是在函数内编写代码，这反过来不是一个选项，因为我打算使用很多函数，包括数据库服务函数，这使得代码相当庞大。有没有办法做到这一点？或者我应该决定在新选项卡上打开该组件吗？

我想更改 SweetAlert2 中的“标题”颜色。我怎样才能做到这一点？先感谢您

function CustomConfirm(title, message, type) {
    return new Promise((resolve) => {
        Swal.fire({
            title: title,
            text: message,
            icon: type,
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6e7d88',
            confirmButtonText: 'Yes',
            cancelButtonText: "No"
        }).then((result) => {
            if (result.isConfirmed) {
                resolve(true);
            } else {
                resolve(false);
            }
        });
    });
}