如何使用 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"（还要确保字母和数字结合）
"locale"（还要确保输入是用户选择的选项集合，例如下拉菜单，而不是您可以在其中输入任何内容的文本字段）
"firstName"（还要保证名字不超过255个字符）

等等

在一个弹出窗口中？

我尝试像下面这样设置多个输入字段，但收到警告 "Unknown parameter"，这似乎不是一个有效的方法。

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"？

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

Answer 1

根据文档：

Multiple inputs aren't supported, you can achieve them by using html and preConfirm parameters. Inside the preConfirm() function you can return (or, if async, resolve with) the custom result:

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

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

How to pass multiple user inputs and update the data in a single popup using Vue-SweetAlert2

javascript

vue.js

sweetalert2