Sweetalert: 入力と組み合わされた多くのボタンは、ボタンの値のみを返します

作成日 2017年10月31日  ·  6コメント  ·  ソース: t4t5/sweetalert

ドキュメントに何かが欠けている場合を除いて、入力フィールドと組み合わせて異なる値を持つ複数のボタンを持つswalを作成した場合、ネイティブのswalコードを使用して入力の値が返されないのはばかげています。 これは、SweetAlertが提供しなければならない可能性を実際に取り除きます。

最も参考になるコメント

@ t4t5すべてのボタンは、入力値とボタン値を返す必要があります。 特に私のユースケースでは、SweetAlertをWebベースのサーバー管理ツールに使用しています。具体的には、管理者がユーザーの[禁止]ボタンをクリックしたときにプロンプ​​トを表示します。 アラートには3つのボタンがあり、時間の長さを表すために( "1d"、 "1w"、または "forever")の値を返す必要があります。 また、ユーザーが禁止されている理由を提供するための入力テキストフィールドも必要です。 これらのボタンのいずれかをクリックすると、コールバックでクリックされたボタンの値と入力値をペアにして、サーバーへのAPIクエリを作成し、理由と禁止期間を指定して禁止を設定できます。

うまくいけば、そのユースケースは両方の値を返すことの重要性を明らかにするはずです。 これにより、開発者は、物事をハックしたり、2つのアラートを作成したりして、1つのステップのプロセスを実行する必要がなくなります。

example

        banPlayer: function (data) {
            var swalField = document.createElement('input');
            swalField.setAttribute("placeholder", "Reason for ban");
            swal({
                title: 'Banning: ' + data.name,
                buttons: {
                    cancel: "Go back!",
                    day: {
                      text: "24hr",
                      visible: true,
                      closeModal: true
                    },
                    week: {
                      text: "1w",
                      visible: true,
                      closeModal: true
                    },
                    perm: {
                      text: "Forever",
                      visible: true,
                      closeModal: true
                    }
                  },
                  content: swalField,
                dangerMode: true
            }).then( value => {
                let reason = swalField.value;
                // build API query request and submit it
            });

上記のスニペットは、コンテンツとボタンの値を取得するための私の「ハッキー」な方法です。 ただし、このスレッドの前半で説明したように、両方の値を返すだけの方がはるかに便利です。

全てのコメント6件

確認ボタンと他のボタンの両方で入力の値を返すようにしたいということですか? あなたのユースケースが正確に何であるかについて詳しく説明していただけますか? :)

@ t4t5おそらくこのFIXMEと関係があります。

swal({
    buttons: {
        cancel: "Go back!",
        one: {
          text: "Button One",
          value: 1
        },
        two: {
          text: "Button Two",
          value: 2
        },
        three: {
          text: "Button Three",
          value: 3
        }
      },
      content: {
        element: "input",
        attributes: {
          placeholder: "What's your favorite food?",
          type: "text",
        },
      }
/*
 * Only returns one value, because input is overridden by buttons
 * so you never get the input's value and the button's value
 * just the button's value.
 */
}).then( value => {
    switch (value) {                  
        case 1:
            swal("You pressed one!")
            break;
        case 2:
            swal("You pressed two!")
            break;
        case 3:
            swal("You pressed three!")
            break;
        default:
            swal("Phew, got outta there.");
    }
});

アラートをネストしたり、ボタンによって上書きされているために役に立たない入力を行う代わりに、ボタンの値と入力値を使用してロジックを実行できると非常に便利です。

button値とcontent値の両方を持つ場合は+1

ボタンのキーの1つを「確認」に設定すると、入力の値が返されます。 例えば:

swal({
  buttons: {
    cancel: "Go back!",
    one: {
      text: "Button One",
      value: 1
    },
    two: {
      text: "Button Two",
      value: 2
    },
    confirm: {
      text: "Button Three",
    }
  },
  content: {
    element: "input",
    attributes: {
      placeholder: "What's your favorite food?",
      type: "text",
    },
  }
})

ユースケースにはそれで十分ですか、それともすべてのボタンが入力値とボタン値の両方を返す必要があるということですか?

@ t4t5すべてのボタンは、入力値とボタン値を返す必要があります。 特に私のユースケースでは、SweetAlertをWebベースのサーバー管理ツールに使用しています。具体的には、管理者がユーザーの[禁止]ボタンをクリックしたときにプロンプ​​トを表示します。 アラートには3つのボタンがあり、時間の長さを表すために( "1d"、 "1w"、または "forever")の値を返す必要があります。 また、ユーザーが禁止されている理由を提供するための入力テキストフィールドも必要です。 これらのボタンのいずれかをクリックすると、コールバックでクリックされたボタンの値と入力値をペアにして、サーバーへのAPIクエリを作成し、理由と禁止期間を指定して禁止を設定できます。

うまくいけば、そのユースケースは両方の値を返すことの重要性を明らかにするはずです。 これにより、開発者は、物事をハックしたり、2つのアラートを作成したりして、1つのステップのプロセスを実行する必要がなくなります。

example

        banPlayer: function (data) {
            var swalField = document.createElement('input');
            swalField.setAttribute("placeholder", "Reason for ban");
            swal({
                title: 'Banning: ' + data.name,
                buttons: {
                    cancel: "Go back!",
                    day: {
                      text: "24hr",
                      visible: true,
                      closeModal: true
                    },
                    week: {
                      text: "1w",
                      visible: true,
                      closeModal: true
                    },
                    perm: {
                      text: "Forever",
                      visible: true,
                      closeModal: true
                    }
                  },
                  content: swalField,
                dangerMode: true
            }).then( value => {
                let reason = swalField.value;
                // build API query request and submit it
            });

上記のスニペットは、コンテンツとボタンの値を取得するための私の「ハッキー」な方法です。 ただし、このスレッドの前半で説明したように、両方の値を返すだけの方がはるかに便利です。

もう1つの例は、入力フィールドと2つのボタン(確認+キャンセル)を持つモーダル( closeOnEsc: false, closeOnClickOutside: false )です。 今は@JayHerlthソリューションを使用します。 {buttons&content}が設定されている場合、value-Parameterがオブジェクトであるとよいでしょう。

このページは役に立ちましたか?
0 / 5 - 0 評価