Sweetalert2 javascript (progresStep)答案

【问题标题】：Sweetalert2 javascript (progresStep)Sweetalert2 javascript (progresStep)
【发布时间】：2018-11-02 19:15:03
【问题描述】：

所以，我在使用 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

你们能举个例子吗？

【问题讨论】：

对不起，这是函数：pastebin.com/6SdvKA9L

标签： sweetalert2

【解决方案1】：

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

swal.mixin({
  input: 'text',
  confirmButtonText: 'Next &rarr;',
  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!'
    })
  }
})

【讨论】：