queue - 甜蜜的警报回到队列中

Question

我想出了一个问题，即在甜蜜警报中返回队列。

该代码显示了一个大 swal，在确认时显示用户 swal 队列具有三个选项。我需要它进入取消按钮队列的第一步。

我找到了一个具有异步功能的解决方案，但在我的情况下它不起作用（或者我犯了一些错误。;） - https://jsfiddle.net/ad3quksn/252/）

$("#ZKARobimy").click(function () {
    swal({
        title: "First decidable swal",
        allowOutsideClick: false,
        width: '70%',
        showCancelButton: true,
        showConfirmButton: true,
        confirmButtonText: 'Go to yes function',
        cancelButtonText: 'Go to no function',,
    }).then((result) => {
        if (result.value)  //pressed confirm button
            swal.mixin({
                confirmButtonText: 'next step ⇛',
                cancelButtonText: '⇚ back to settings',
                showCancelButton: true,
                reverseButtons: true,
                progressSteps: ['settings', 'verify', 'ending'],
                width: '70%',
                allowOutsideClick: false,
            }).queue([
                {
                    title: "First in queue - settings",
                    html: document.getElementById("doingZKAIt").innerHTML,
                    onOpen: () => {
                        generujSMSzkaIT();
                    }, onClose: function (dismiss) {

                        if (dismiss == 'cancel') {

                            console.log("first in queue " + dismiss)
                            $("#ZKARobimy").click();
                            swal.clickConfirm(); //here i wanted to click confirm button in first swal - before queue

                            generujSMSzkaIT();
                            swal.close();
                        }
                    console.log("outside if - onclose first in queue")
                    }
                },'swal with back to first one in queue', 'swal without back button'

            ]), function (dismiss) { //tried to set function for the swal.mixin on cancel button, but it is not working the way i want it to.

                if( dismiss == 'cancel')
                {
                    console.log("swal.mixin cancel " + dismiss)
                    $("#ZKARobimy").click();
                    swal.clickConfirm();
                }
            }
        } else if (//pressed cancel button
          result.dismiss === swal.DismissReason.cancel
        ) {
            swal(
              'Cancelled',
              'Your imaginary file is safe :)',
              'error'
            )
        }
    })
})

有没有其他方法可以返回 swal 队列？

标签： queuesweetalertsweetalert2

Answer 1

这在 sweetalert2 中可用：https ://sweetalert2.github.io/recipe-gallery/queue-with-back-button.html

const steps = ['1', '2', '3']
const swalQueueStep = Swal.mixin({
  confirmButtonText: 'Forward',
  cancelButtonText: 'Back',
  progressSteps: steps,
  input: 'text',
  inputAttributes: {
    required: true
  },
  reverseButtons: true,
  validationMessage: 'This field is required'
})

const values = []
let currentStep

for (currentStep = 0; currentStep < steps.length;) {
  const result = await swalQueueStep.fire({
    title: `Question ${steps[currentStep]}`,
    inputValue: values[currentStep],
    showCancelButton: currentStep > 0,
    currentProgressStep: currentStep
  })

  if (result.value) {
    values[currentStep] = result.value
    currentStep++
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    currentStep--
  } else {
    break
  }
}

if (currentStep === steps.length) {
  Swal.fire(JSON.stringify(values))
}