如何使用后退按钮添加自定义队列

Question

I am reviewing the documentation example of SweetAlert2, which generates a window with steps and includes the button to go back.

I can't find a way to configure the different queues as I want. According to the documentation, one can configure it with .queue (), but it is not working for me.

Does anyone know how to do it?

 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' }) async function backAndForth () { 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 === 'cancel') { currentStep-- } else { break } } if (currentStep === steps.length) { Swal.fire(JSON.stringify(values)) } } backAndForth()

 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

Answer 1

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'
})
async function backAndForth() {
    const values = []
    let currentStep
    for (currentStep = 0; currentStep < steps.length;) {
        if (steps[currentStep] == 1) {
            var result = await swalQueueStep.fire({
                title: 'Question .' + steps[currentStep],
                inputValue: values[currentStep],
                showCancelButton: currentStep > 0,
                currentProgressStep: currentStep
            })
        } else if (steps[currentStep] == 2) {
            var result = await swalQueueStep.fire({
                title: 'Question ..' + steps[currentStep],
                inputValue: values[currentStep],
                showCancelButton: currentStep > 0,
                currentProgressStep: currentStep
            })
        } else if (steps[currentStep] == 3) {
            var result = await swalQueueStep.fire({
                title: 'Question ...' + steps[currentStep],
                inputValue: values[currentStep],
                showCancelButton: currentStep > 0,
                currentProgressStep: currentStep
            })
        } else {
            break
        }
        if (result.value) {
            values[currentStep] = result.value
            currentStep++
        } else if (result.dismiss === 'cancel') {
            currentStep--
        } else {
            break
        }

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