我如何通过 sweetalert2 上的输入确认对话？

Question

function order(id){
     const { value: numberinput } = await Swal.fire({
        title: 'You are ordering' + id + 'are you sure?' ,
        text: 'When you press the "Order!" button, your order will be processed.',
        icon: 'warning',
        showCancelButton: true,
        cancelButtonColor: '#d33',
        confirmButtonColor: '#3bc42b',
        cancelButtonText: 'Cancel',
        confirmButtonText: 'Order!',
        reverseButtons: true,
        input: 'number',
        inputLabel: 'portion size: \n ‍',
        inputPlaceholder: 'Enter portion',
        inputAttributes: {
            min: 1,
            max: 20,
            step: 1
        },
        inputValue: 1,
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire({
      title: 'Your order has taken!',
        text: 'Your order of ${numberinput} portions is being prepared',
        icon: 'success',
        confirmButtonText: 'OK!'
    })
  } else if (result.isDismissed)
      Swal.fire({
        title: 'Abandoned!',
        text: 'Your order of ${numberinput} servings has been abandoned',
        icon: 'error',
        confirmButtonText: 'OK!'
        })
})
}

这不起作用，并且有一个 swal2 示例：

const ipAPI = '//api.ipify.org?format=json'

const inputValue = fetch(ipAPI)
  .then(response => response.json())
  .then(data => data.ip)

const { value: ipAddress } = await Swal.fire({
  title: 'Enter your IP address',
  input: 'text',
  inputLabel: 'Your IP address',
  inputValue: inputValue,
  showCancelButton: true,
  inputValidator: (value) => {
    if (!value) {
      return 'You need to write something!'
    }
  }
})

if (ipAddress) {
  Swal.fire(`Your IP address is ${ipAddress}`)
}

我想问题是我没有写 if (numberinput) 但我不知道如何将 if(number) 和 if(result.isConfirmed)/if(result.isDismissed) 一起写。有人可以帮我吗？我尝试了很多东西，但都失败了。

Answer 1

当您使用await 时，您不应该使用.then()。 await 将返回Swal.fire() 的结果，然后您可以编写普通的同步代码来使用该结果。这将允许您使用从该结果分配的变量。

async function order(id) {
  const {
    value: numberinput,
    isConfirmed,
    isDismissed
  } = await Swal.fire({
    title: 'You are ordering ' + id + ' are you sure?',
    text: 'When you press the "Order!" button, your order will be processed.',
    icon: 'warning',
    showCancelButton: true,
    cancelButtonColor: '#d33',
    confirmButtonColor: '#3bc42b',
    cancelButtonText: 'Cancel',
    confirmButtonText: 'Order!',
    reverseButtons: true,
    input: 'number',
    inputLabel: 'portion size: \n ‍',
    inputPlaceholder: 'Enter portion',
    inputAttributes: {
      min: 1,
      max: 20,
      step: 1
    },
    inputValue: 1,
  })

  if (isConfirmed) {
    Swal.fire({
      title: 'Your order has taken!',
      text: `Your order of ${numberinput} portions is being prepared`,
      icon: 'success',
      confirmButtonText: 'OK!'
    })
  } else if (isDismissed) {
    Swal.fire({
      title: 'Abandoned!',
      text: `Your order has been abandoned`,
      icon: 'error',
      confirmButtonText: 'OK!'
    })
  }
}

order(123);

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>