Question

我正在使用SweetAlert2向用户传达一些反馈。这是一个学习应用程序，因此，我希望反馈能够持续一段时间。我不想在显示反馈后立即显示任何按钮，因为人们倾向于只是单击“确定”或“取消”而不阅读文本。

反馈中的字符数因屏幕而异，因此，我使用sweetalert2的timer参数是文本中字符数的倍数。但是，计时器功能并不完美，因为人们的阅读速度不同。理想情况下，我希望在计时器超时后出现“确定”按钮。我是否可以通过某种API调用来动态更改警报框的属性？

swal({
        html: feedback,
        timer: feedback.length*50,
        showCloseButton: false,
        showCancelButton: false,
        showConfirmButton: false,
        allowOutsideClick: false,
    });

Answer 1

我没有看到任何隐藏和显示按钮的方法，但您可以禁用并启用它们：

＆＃13;

swal({
  html: 'test',
  allowOutsideClick: false,
  allowEscapeKey: false,

  onOpen: function () {
    swal.disableButtons();
    setTimeout(swal.enableButtons, 'test'.length * 500) 
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css">

＆＃13;

或使它们透明：

＆＃13;

swal({
  html: 'test',
  allowOutsideClick: false,
  allowEscapeKey: false,

  onOpen: function () {
    var b = swal.getConfirmButton()
    b.style.opacity = 0
    b.disabled = true
    
    setTimeout(function() {
      b.disabled = false
      b.style.opacity = 1
    }, 'test'.length * 500) 
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css">

＆＃13;

或隐藏并显示：

＆＃13;

swal({
  html: 'test',
  allowOutsideClick: false,
  allowEscapeKey: false,

  onOpen: function () {
    var b = swal.getConfirmButton()
    b.hidden = true
    b.disabled = true
    
    setTimeout(function() {
      b.disabled = false
      b.hidden = false
    }, 'test'.length * 500) 
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css">

＆＃13;

Answer 2

您好，您可以使用设置超时功能并在您希望显示的按钮上调用jQuery的.show（）函数（假设您可以使用jQuery）。

以下代码可以帮助您

swal({
        html: feedback,
        timer: feedback.length*50,
        showCloseButton: false,
        showCancelButton: false,
        showConfirmButton: false,
        allowOutsideClick: false,
    });
    setTimeout(function () {
        $(".swal2-cancel").show();
        $(".swal2-confirm").show();
        $(".swal2-close").show();
    }, 3000);

希望这会有所帮助： - ）

在sweetalert2中延迟按钮的外观

2 个答案: