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

如何使用Vue-SweetAlert2

1 个答案: