Sweetalert: 许多按钮与输入组合仅返回按钮的值

你的意思是你想让确认按钮和其他按钮都返回输入的值吗？ 您能否详细说明您的用例究竟是什么？ :)

@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.");
    }
});

能够使用按钮的值以及任何输入值来执行逻辑而不是嵌套警报和具有无用的输入是非常有用的，因为它被您的按钮覆盖。

+1 同时具有button值和content值

如果您将按钮的其中一个键设置为“确认”，它将返回输入的值。 例如：

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 的服务器管理工​​具，更具体地说是在管理员单击用户上的“禁止”按钮时提示管理员。 然后警报将有三个按钮，我需要返回一个值（“1d”、“1w”或“永远”）来表示时间长度。 我还需要一个输入文本字段来提供用户被禁止的原因。 单击这些按钮中的任何一个时，它都会允许我的回调将单击的按钮值与输入值配对，以构造返回到我的服务器的 API 查询，以设置带有原因的禁令以及禁令应持续多长时间。

希望该用例应该澄清返回两个值的重要性。 它允许开发人员不必绕过事情或创建两个警报来完成应该是一个步骤的过程。

        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
            });

上面的代码片段是我获取内容和按钮值的“hacky”方式。 但是，正如本线程前面所述，让它只返回两个值会好得多。

另一个示例是带有输入字段和两个按钮的模态 ( closeOnEsc: false, closeOnClickOutside: false )：确认 + 取消。 我现在要使用@JayHerlth解决方案。 如果设置了 { 按钮和内容}，则 value-Parameter 是一个对象会更好。