4

問題

私は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
    })
}
4

1 に答える 1