Как передать несколько пользовательских вводов и обновить данные в одном всплывающем окне с помощью Vue-SweetAlert2 - PullRequest
Новая
       15

Как передать несколько пользовательских вводов и обновить данные в одном всплывающем окне с помощью Vue-SweetAlert2

0 голосов
/ 01 июля 2019

Я знаю, как запросить у пользователя его или ее имя пользователя с помощью всплывающего окна 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>

С кодом, подобным приведенному выше, вы можете сохранить все, что пользователь ввел в созданный клиентом, и он должен отображаться на экране после ввода пользователем данных.

Но что еслиЯ хотел спросить пользователя о нескольких частях информации?Например, как запросить информацию типа

  • "customerNumber" (также необходимо убедиться, что алфавиты и цифры объединены)
  • "locale" (также необходимо убедиться, чточто ввод представляет собой набор вариантов, из которых пользователь выбирает, например, раскрывающееся меню, а не текстовое поле, в котором вы можете вводить все, что вам нравится)
  • "firstName" (также необходимо убедиться, чтоимя не должно превышать 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"
}

1 Ответ

0 голосов
/ 01 июля 2019

Согласно документации:

Несколько входных данных не поддерживаются, вы можете достичь их, используя параметры 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}`)
}
...