如何使用Vue-SweetAlert2在单个弹出窗口中传递多个用户输入并更新数据

Question

我知道如何通过Vue-SweetAlert2弹出窗口向用户询问其用户名。

<template>
      <v-btn class="create-button" color="yellow" @click="alertDisplay">Create</v-btn>

    <br/>

    <p>Test result of createCustomer: {{ createdCustomer }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        createdCustomer: null
      }
    },
    methods: {
      alertDisplay() {
        var customer = await this.$swal({
                          title: 'What is your Name?',
                          input: 'text',
                          inputPlaceholder: 'Enter your name here',
                          showCloseButton: true,       
                        });
        console.log(customer);
        this.createdCustomer = customer; 
      }
    }
  }
</script>

使用上面的代码，您可以存储用户在createdCustomer中键入的任何内容，并且在用户提供输入后，它应该显示在屏幕上。

但是，如果我想询问用户多条信息怎么办？ 例如，我如何要求提供类似信息

• “ customerNumber”（还希望确保字母和数字结合在一起）
• “语言环境”（还希望确保输入是用户从中选择的选项的集合，例如下拉菜单，而不是可以在其中键入所需内容的文本字段）
• “名字”（还希望确保名称不超过255个字符）

等等

在一个弹出窗口中？

我试图像下面那样设置多个输入字段，但是收到警告“未知参数”，这似乎不是有效的方法。

var customer = await this.$swal({
                          title: 'Fill in your personal data',
                          input1: 'text',
                          input2: 'text',
                          input3: 'text',
                          inputPlaceholder: 'Enter your name here',
                          showCloseButton: true,       
                        });

以及如何检查用户是否提供了有效的输入（例如名称在255个字符以内，同时使用了字母和数字等）？ 如果我使用的是C或Java，我可以想象使用if语句，例如

if(length <= 255){
    // proceed
} else {
    // warn the user that the input is too long
}

代码中的某处，但是在这种情况下，我不知道如何在弹出窗口中执行类似的if语句...

[其他问题]

是否还可以传递包含多个较小元素（例如“地址”）的对象？

"address": {
    "street": "string",
    "city": "string",
    "country": "USA",
    "region": "string",
    "zipCode": "string"
}

Answer 1

根据文档：

不支持多个输入，您可以使用html和preConfirm参数来实现它们。 在preConfirm（）函数内部，您可以返回（或使用异步方法解析）自定义结果：

const {value: formValues} = await Swal.fire({
    title: 'Multiple inputs',
    html: '<input id="swal-input1" class="swal2-input">' +
        '<input id="swal-input2" class="swal2-input">',
    focusConfirm: false,
    preConfirm: () => {
        return [
            document.getElementById('swal-input1').value,
            document.getElementById('swal-input2').value
        ]
    }
})
if (formValues) {
    Swal.fire(JSON.stringify(formValues))
}

https://sweetalert2.github.io/

为了进行验证，您必须使用inputValidor如下所示：

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

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