javascript 在SweetAlert2中，allowOutsideClick不起作用

6jjcrrmo 于 2023-01-04 发布在 Java

关注(0)|答案(1)|浏览(204)

function show_alert(args) {
    Swal.fire({
        icon: args.icon,
        title: args.title,
        text: args.message,
        html: args.html,
        allowEscapeKey: args.allowEscapeKey ? args.allowEscapeKey : true,
        allowOutsideClick: args.allowOutsideClick ? args.allowOutsideClick : true,
        confirmButtonText: args.confirmButtonText ? args.confirmButtonText : 'Tamam',
        confirmButtonColor: args.confirmButtonColor ? args.confirmButtonColor : '#3085d6',
        cancelButtonText: args.cancelButtonText ? args.cancelButtonText : 'İptal',
        cancelButtonColor: args.cancelButtonColor ? args.cancelButtonColor : '#d33',
        showCancelButton: args.showCancelButton === undefined ? false : args.showCancelButton,
        showCloseButton: args.showCloseButton === undefined ? false : args.showCloseButton,
        showConfirmButton: args.showConfirmButton === undefined ? true : args.showConfirmButton,
        didOpen: args.didOpen ? args.didOpen : null,
        reverseButtons: true,
    }).then((result) => {
        if (result['isConfirmed']) {
            args.callback ? args.callback_args ? args.callback(args.callback_args) : args.callback() : null;
        } else if (result['isDismissed'] && args['isDismissed']) {
            event.preventDefault();
            args.isDismissed ? args.isDismissed() : null;
        }
    });
}

上面的代码块是一个通用的警报显示函数，我可以根据我在“args”中给予出的参数来显示警报。
我编写了以下代码块，以便在用户单击按钮时显示加载警报：

show_alert({
    'title': 'Please wait',
    'html': 'Loading audio file ...',
    'allowEscapeKey': false,
    'allowOutsideClick': false,
    'showConfirmButton': false,
    'showCancelButton': false,
    'showCloseButton': false,
    'didOpen': () => {Swal.showLoading();},
    'isDismissed': () => {console.log('dismissed');}
});

但是，当用户单击页面上警报以外的任何位置时，警报将关闭。
有没有可能通过使用event.preventDefault()这样的函数来阻止这种情况？如果您能提供帮助，我将不胜感激。
在“else if”块中，我试图捕获事件并阻止单击事件，就像“allowOutsideClick”属性一样，但我做不到。

JavaScript

来源：https://stackoverflow.com/questions/74982917/allowoutsideclick-not-working-in-sweetalert2

1条答案

按热度按时间

fivyi3re1#

三元组总是将allowOutsideClick设置为真实值：

allowOutsideClick: args.allowOutsideClick ? args.allowOutsideClick : true

如果allowOutsideClick错误，则需要将其更改为false：

allowOutsideClick: args.allowOutsideClick ? args.allowOutsideClick : false

由于SweetAlert的选项接受truthy/falsy值，因此可以简化为：

allowOutsideClick: args.allowOutsideClick

我建议您看看其他选项，并提供类似的优化。例如allowEscapeKey选项（似乎也有类似的问题）。
此外，任何地方，你有模式：

a ? a : b

可以简化为

a || b

因为它们的意思是一样的。

function show_alert(args) {
  Swal.fire({
    icon: args.icon,
    title: args.title,
    text: args.message,
    html: args.html,
    allowEscapeKey: args.allowEscapeKey,
    allowOutsideClick: args.allowOutsideClick,
    confirmButtonText: args.confirmButtonText || 'Tamam',
    confirmButtonColor: args.confirmButtonColor || '#3085d6',
    cancelButtonText: args.cancelButtonText || 'İptal',
    cancelButtonColor: args.cancelButtonColor || '#d33',
    showCancelButton: args.showCancelButton,
    showCloseButton: args.showCloseButton,
    showConfirmButton: args.showConfirmButton === undefined ? true : args.showConfirmButton,
    didOpen: args.didOpen,
    reverseButtons: true,
  }).then((result) => {
    if (result['isConfirmed']) {
      args.callback ? args.callback_args ? args.callback(args.callback_args) : args.callback() : null;
    } else if (result['isDismissed'] && args['isDismissed']) {
      event.preventDefault();
      args.isDismissed ? args.isDismissed() : null;
    }
  });
}

show_alert({
  'title': 'Please wait',
  'html': 'Loading audio file ...',
  'allowEscapeKey': false,
  'allowOutsideClick': false,
  'showConfirmButton': false,
  'showCancelButton': false,
  'showCloseButton': false,
  'didOpen': () => {
    Swal.showLoading();
  },
  'isDismissed': () => {
    console.log('dismissed');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.6.16/sweetalert2.min.js" integrity="sha512-4aFcnPgoxsyUPgn8gNinplVIEoeBizjYPTpmOaUbC3VZQCsRnduAOch9v0Pn30yTeoWq1rIZByAE4/Gg79VPEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.6.16/sweetalert2.css" integrity="sha512-JzSVRb7c802/njMbV97pjo1wuJAE/6v9CvthGTDxiaZij/TFpPQmQPTcdXyUVucsvLtJBT6YwRb5LhVxX3pQHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>

顺便说一句，你在.then()中误用了条件运算符? :。当你需要使用表达式的返回值时，你应该使用它们。当你不使用计算值，而只是执行副作用，比如调用一个函数时，你最好使用if语句。
我还认为，仅当args.callback_args为真时才调用args.callback(args.callback_args)可能不是您想要做的，因为这会阻止您将callback_args指定为虚假值，例如false、0、""等。您最好总是调用args.callback(args.callback_args)

赞(0）回复(0）举报 2023-01-04

我来回答

javascript 在SweetAlert2中，allowOutsideClick不起作用

1条答案

相关问题

热门标签

最新问答