«Вы уверены, что хотите…?» —Вопрос на миллион долларов (почти буквально)
Приведенный выше вопрос является типичным примером довольно популярного отказоустойчивого механизма во многих проектах 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, помогая сохранить наш код СУХИМ.
Желаю дня без ошибок!