sweetalert 像普通提示一样被阻止

aml*_*ker 3 javascript svg blocking sweetalert

我正在使用 swal ( http://t4t5.github.io/sweetalert ) 在用户点击某些内容时从用户那里获取一些数据。然后我想从我调用 swal 的函数返回该值。换句话说,对于下面的示例,我想将项目的文本设置为labels输入值。问题是它似乎在 swal 关闭/数据输入之前返回:

.on('dblclick', function(l) {
  labels.text(function (e) {  
     return swal({   
      title: "Edit label"
    },
      function(inputValue){  
      if(inputValue) {
        return inputValue
      }
    });
   })
});
Run Code Online (Sandbox Code Playgroud)

正常情况prompt alert是阻塞的,所以可以这样做,可以swal这样做吗?

谢谢

Bra*_*ldi 5

虽然您无法使用 Sweet Alerts 块,但您可以使用其回调功能来触发任何需要首先消除警报的代码。这些例子有一些这样的例子。例如,假设您有一个是/否样式的警报,则有文件删除示例。

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  cancelButtonText: "No, cancel plx!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  //The callback will only fire on cancel if the callback function accepts an
  //argument. So, if the first line were 'function () {' with no argument, clicking
  //cancel would not fire the callback.
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } else {
    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});
Run Code Online (Sandbox Code Playgroud)

或者 AJAX 示例:

swal({
  title: "Ajax request example",
  text: "Submit to run ajax request",
  type: "info",
  showCancelButton: true,
  closeOnConfirm: false,
  showLoaderOnConfirm: true,
},
function(){
  setTimeout(function(){
    swal("Ajax request finished!");
  }, 2000);
});
Run Code Online (Sandbox Code Playgroud)

在这两种情况下,直到与警报交互时才会触发回调,并且调用的结果作为参数传递给回调。

所以说你需要等到有人点击“确定”。

swal({
  title: "Delete your account?",
  text: "Clicking on continue will permanently delete your account.",
  type: "warning",
  confirmButtonText: "Continue",
  closeOnConfirm: false
}, function () {
  swal("Deleted account", "We'll miss you!", "success");
});
Run Code Online (Sandbox Code Playgroud)

注意:closeOnConfirm仅当您在回调中显示后续警报时才closeOnCancel需要使用/ 。false如果设置为true,它将在向用户显示第二个警报之前将其关闭。但是,如果您正在做一些不swal相关的事情,并且没有关闭它,那么它将无限期地保持打开状态。

swal({
  title: "Delete your account?",
  text: "Clicking on continue will permanently delete your account.",
  type: "warning",
  confirmButtonText: "Continue"
}, function () {
  console.log("This still shows!")
});
Run Code Online (Sandbox Code Playgroud)

如果您希望警报在执行不swal相关的操作时保持打开状态,则应swal.close()在代码末尾调用。

swal({
  title: "Delete your account?",
  text: "Clicking on continue will permanently delete your account.",
  type: "warning",
  confirmButtonText: "Continue",
  closeOnConfirm: false
}, function () {
  console.log("This still shows!");
  setTimeout(function () {
    // This will close the alert 500ms after the callback fires.
    swal.close();
  }, 500);
});
Run Code Online (Sandbox Code Playgroud)