Sweetalert2 javascript (progresStep)

Question

所以，我对sweetalert2有一些问题(我是新来的)。

我有这个脚本，但我不知道如何使用进度步骤(参见下面的.gif )

<a href="javascript:void(0)" onclick="givepptoplayer()">Set Premium Points</a></li>

<script>
  function givepptoplayer() {
    swal({
       title: 'Change User Premium Points <?php echo $data->name ?>',
       input: 'number',
       showCancelButton: false,
       confirmButtonText: 'edit',
       showLoaderOnConfirm: true,
       confirmButtonClass: 'btn btn-success',
       cancelButtonClass: 'btn btn-danger m-l-10',
       allowOutsideClick: false,
       inputValue: '',
     }).then(function (result) {           
       $.post('<?php echo config::$_PAGE_URL ?>api/finishthis', { 'userid' : '<?php echo $data->id ?>', 'changePP': result.value}, function(result) 
         { 
           swal({
             type: 'success',
             title: 'Succes!',
             html: result
           });
         });
     });                                    
   }
</script>

我想在什么时候创建一个类似下面这样的progressStep：https://gyazo.com/41f65065108e3937e3afc2a3064ee028

你们能给我举个例子吗？

Answer 1

在https://sweetalert2.github.io/#chaining-modals上有一个用相关代码链接模态的例子。基本上代码是：

swal.mixin({
  input: 'text',
  confirmButtonText: 'Next →',
  showCancelButton: true,
  progressSteps: ['1', '2', '3']
}).queue([
  {
    title: 'Question 1',
    text: 'Chaining swal2 modals is easy'
  },
  'Question 2',
  'Question 3'
]).then((result) => {
  if (result.value) {
    swal({
      title: 'All done!',
      html:
        'Your answers: <pre><code>' +
          JSON.stringify(result.value) +
        '</code></pre>',
      confirmButtonText: 'Lovely!'
    })
  }
})