«Вы уверены, что хотите…?» —Вопрос на миллион долларов (почти буквально)

Приведенный выше вопрос является типичным примером довольно популярного отказоустойчивого механизма во многих проектах User Experience, особенно в отношении действий, последствия которых нельзя легко отменить. Когда пользователь запускает определенные действия, такие как; удалить учетную запись, удалить запись из списка и т. д., мы хотим быть уверены, что они имели в виду, иначе слишком много пользователей непреднамеренно споткнутся эти полностью предотвратимые наземные мины в наших приложениях, что, следовательно, приводит к ухудшению пользовательского опыта.

Существует бесконечный список изящных приемов и инструментов для создания практической реализации подтверждения действия, но мы сосредоточимся на простой реализации, требующей Noty, в контексте Vue.js.

Но почему Ноти?

Если вы не знали Noty, это простая в использовании …библиотека уведомлений без зависимостей, которая также поставляется из коробки с возможностью чистого подтверждения действия. Кроме того, обратите внимание; Noty хорошо поддерживается, проверен в боевых условиях и легковесен, поэтому он не усложняет ваше приложение.

Реализация

Я предполагаю, что у вас уже есть проект Vue.js, так что я сразу перейду к нему.

Рассмотрим сценарий ниже:

<template>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-12">
            ...
            <button @click.prevent="confirmingAction('reset')" class="btn btn-warning mt-5 ml-2">Reset</button>
            <button :disabled="isSubmitting" @click.prevent="confirmingAction('submit')" class="btn btn-success mt-5 float-right">
                <span v-if="isSubmitting">Submitting...</span>
                <span v-else>Submit</span>
            </button>
            ...
        </div>
    </div>
</template>

Шаблон компонента Vue содержит реализацию сортировки, но мы сосредоточимся на ролях двух кнопок, каждая из которых отвечает за инициирование различных действий при нажатии — reset и отправить соответственно.

Давайте также определим эти действия:

NB: не забудьте импортировать Noty и добавить все необходимые зависимости CSS, в зависимости от того, как вы используете модуль. Посмотрите, как здесь.

<script>
    import Noty from 'noty';

    export default {
        ...
methods: {
            confirmingAction(action) {
                let context = this;
                var n = new Noty({
                    text: `Are you sure you want to ${action}?`,
                    buttons: [
                        Noty.button('YES', 'btn btn-primary mr-2', function () {
                            context[action]();
                            n.close();
                        }, {id: 'button1', 'data-status': 'ok'}),

                        Noty.button('NO', 'btn btn-danger', function () {
                            n.close();
                        })
                    ]
                });
                n.show();
            },
            reset() {
                // do some stuff...
                location.reload()
            },
            submit() {
                this.isSubmitting = true;
                // do some other stuff...
            },
        }
        ...
    }
</script>

Я упростил приведенный выше фрагмент кода настолько, чтобы продемонстрировать важные моменты в этом руководстве.

Заметили, что каждая кнопка вызывает один и тот же метод confirmingAction при нажатии, но передает этому методу разные аргументы? В методе создается новый экземпляр Noty. Экземпляр принимает объект конфигурации, который позволяет нам выполнять некоторые настройки. Подробности см. здесь.

Кнопка 1:

Метод: confirmingAction

Аргумент: 'reset'

Когда confirmingAction разрешается, вывод context[action]() будет зависеть от аргумента, переданного методу, и в этом случае context[action]( )будет разрешено какthis['reset'](),что-то вродеthis.reset(). Это также означает, что текст: `Are you sure you want to ${action}?`будет просто выводитьсяВы уверены, что хотите сбросить настройки?

Кнопка 2:

Метод: confirmingAction

Аргумент: "отправить"

Когда confirmingAction разрешается, выходные данные context[action]() также будут зависеть от аргумента, переданного методу, и в этом случае context[action] ()будет разрешено какthis['submit'](),что-то вроде this.submit(). Это также означает, что текст: `Вы уверены, что хотите ${action}?`будет просто выводитьсяВы уверены, что хотите отправить?

Каждый из них запускает соответствующий метод, когда пользователь нажимает YES в диалоговом окне подтверждения Noty, помогая сохранить наш код СУХИМ.

Желаю дня без ошибок!