SweetAlert2获得自定义HTML

Question

问题

我使用SweetAlert2从输入值，里面坐了自定义HTML，显示一些输入框打开警报。我想使用SweetAlert2中的正常确认/取消按钮将这些输入的值发送到套接字。

问题

我怎样才能得到这些输入值，使用正常SweetAlert2按钮？请不要建议使用普通输入或HTML按钮，因为这是一种解决方法，我不希望这样。

环境

我使用jQuery，SweetAlert2，和几个unrelevant库，如Vue.js和Socket.io等

代码

function addUser() { 
    swal({ 
     html: ` 
      <div class="field"> 
       Email: 
       <p class="control has-icons-left"> 
       <input class="input" type="email" placeholder="Email"> 
        <span class="icon is-small is-left"> 
         <i class="mdi mdi-email"></i> 
        </span> 
       </p> 
      </div> 
      <div class="field"> 
       Name: 
       <p class="control has-icons-left"> 
        <input class="input" type="text" placeholder="Name"> 
        <span class="icon is-small is-left"> 
         <i class="mdi mdi-account"></i> 
        </span> 
       </p> 
      </div> 
      <div class="field"> 
       Password: 
       <p class="control has-icons-left"> 
        <input class="input" type="text" placeholder="Password"> 
        <span class="icon is-small is-left"> 
         <i class="mdi mdi-key"></i> 
        </span> 
       </p> 
      </div> 
      <div class="field"> 
       Level: 
       <p class="control has-icons-left"> 
        <input class="input" type="text" placeholder="Level"> 
        <span class="icon is-small is-left"> 
         <i class="mdi mdi-arrow-up"></i> 
        </span> 
       </p> 
      </div> 
     `, 
     confirmButtonText: 'Confirm', 
     cancelButtonText: 'Cancel', 
     confirmButtonClass: 'button is-success has-right-spacing', 
     cancelButtonClass: 'button is-danger', 
     buttonsStyling: false, 
     showCancelButton: true 
    }) 
} 

Answer 1

既然你正在使用自定义HTML输入，图书馆API中的常规设置不足以实现您的目标。我建议你从他们的API函数中使用preConfirm来获得输入值，如下所示：

function addUser() { 
    swal({ 
     html: `...`, 
     confirmButtonText: 'Confirm', 
     // ... 
     showCancelButton: true, 
     preConfirm: function() { 
      return new Promise((resolve, reject) => { 
       // get your inputs using their placeholder or maybe add IDs to them 
       resolve({ 
        Email: $('input[placeholder="Email"]').val(), 
        Name: $('input[placeholder="Name"]').val(), 
        Password: $('input[placeholder="Password"]').val(), 
        Level: $('input[placeholder="Level"]').val() 
       }); 

       // maybe also reject() on some condition 
      }); 
     } 
    }).then((data) => { 
     // your input data object will be usable from here 
     console.log(data); 
    }); 
}