問題
私はSweetAlert2を使用しており、内部にカスタム HTML を含むアラートを開き、いくつかの入力ボックスを表示しています。SweetAlert2 の通常の確認/キャンセル ボタンを使用して、これらの入力の値をソケットに送信したいと考えています。
質問
通常の SweetAlert2 ボタンを使用して、これらの入力の値を取得するにはどうすればよいですか? 通常の入力や HTML ボタンを使用することは提案しないでください。これは回避策であり、私はそうしたくありません。
環境
jQuery、SweetAlert2、および 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
})
}