CodeWatchers

Создание диалогового окна подтверждения с помощью Livewire: пошаговое руководство

Nkenganyi Clovis Free Resources Dec 26, 2023

Livewire — это полнофункциональный фреймворк для Laravel , который упрощает создание динамических интерфейсов, не выходя из Laravel.

Возможность создавать диалоговые окна подтверждения практически без кода и без JavaScript — одна из особенностей Livewire.

В этом сообщении блога я расскажу вам о процессе создания диалогового окна подтверждения с помощью Livewire за несколько простых шагов, используя новую HTML-директиву Wire:confirm , которая упрощает, как никогда, добавление диалогового окна подтверждения перед выполнением важного или опасное действие.

Установить Livewire

Чтобы использовать Livewire, вам необходимо установить его в свой проект Laravel. Вы можете сделать это, выполнив следующую команду в своем терминале:

composer require livewire/livewire

Это позволит установить Livewire в качестве зависимости и опубликовать его ресурсы и файлы конфигурации.

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

Вы также можете дополнительно запустить следующую команду « php artisan livewire:publish --config », чтобы опубликовать файл конфигурации Livewire, который позволит вам настроить некоторые параметры.

Использование нового провода:confirm' упрощает добавление диалогового окна подтверждения в ваше приложение.

Вы можете использовать провод:подтвердить для простого подтверждения с кнопками «Отмена» и «ОК» в сочетании с таким событием, как провод:клик:

<div>
    <h2>Danger zone</h2>
    <button
        type="button"
        wire:click="delete"
        wire:confirm="Are you sure you want to delete this project?"
    >
        Delete this project
    </button>
</div>

Livewire запустит всплывающее окно подтверждения в браузере, когда вы нажмете кнопку.

Все станет немного интереснее, если вы попросите пользователя ввести что-то, чтобы убедиться, что он намеренно хочет сделать что-то катастрофическое.

<div>
    <h2>Danger zone</h2>
    {{-- ... --}}
    <button
        type="button"
        wire:click="delete"
        wire:confirm.prompt="Are you sure?\n\nType DELETE to confirm|DELETE"
    >
        Delete this project
    </button>
</div>

Команда «|DELETE» позволяет Livewire узнать ожидаемое приглашение для сопоставления.

При нажатии кнопки появится модальное окно Prompt(), в котором пользователю будет предложено написать «УДАЛИТЬ». Если введенные пользователем данные совпадают, будет вызван метод delete() компонента Livewire.

Слово или фразу подтверждения можно изменить, чтобы отразить динамическое значение компонента. Например, вы можете потребовать от пользователя указать имя проекта, чтобы проверить:

Я решил, что проще всего будет перевести все в верхний регистр, поскольку есть одна оговорка: сопоставление текста чувствительно к регистру. Вы должны использовать объекты HTML в атрибуте ' wire:confirm ', если хотите использовать кавычки, как я демонстрирую.

<div>
    <h2>Danger zone</h2>
    {{-- ... --}}
    <button
        type="button"
        wire:click="delete"
        wire:confirm.prompt="Are you sure?\n\nType &quot;{{ str($project_name)->upper() }}&quot; to confirm|{{ str($project_name)->upper() }}"
    >
        Delete this project
    </button>
</div>

Почему вам следует использовать HTML-директиву Livewire Wire:confirm?

Если вы ищете простой и эффективный способ добавить диалоговое окно подтверждения перед выполнением важного или опасного действия на вашей веб-странице, вам следует рассмотреть возможность использования HTML-директивы wire:confirm .

Эта директива является частью платформы Livewire — библиотеки, которая позволяет легко создавать динамические и интерактивные веб-приложения с помощью Laravel.

Директива wire:confirm позволяет указать сообщение, которое будет отображаться в собственном модальном окне браузера, когда пользователь нажимает на элемент, к которому прикреплено действие Livewire.

Например, если у вас есть кнопка, удаляющая запись из базы данных, вы можете добавить Wire:confirm="Вы уверены, что хотите удалить это?" к элементу кнопки, и пользователь увидит диалоговое окно с просьбой подтвердить свое действие перед запуском действия Livewire.

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

Директива wire:confirm имеет ряд преимуществ перед другими методами добавления диалоговых окон подтверждения, такими как использование JavaScript или пользовательских компонентов.

Во-первых, он использует собственный модальный браузер Window.confirm , который прост и единообразен для разных браузеров и платформ.

Вам не придется беспокоиться о вопросах стиля, совместимости или производительности.

Во-вторых, он очень прост в использовании и требует минимального кода.

Вам просто нужно добавить директиву и сообщение к элементу, а Livewire сделает все остальное.

В-третьих, он легко интегрируется с инфраструктурой Livewire, что означает, что вы можете использовать его с любым действием Livewire, например, wire:click , wire:submit или wire:model .

Заключение

Директива wire:confirm — отличный инструмент для добавления диалоговых окон подтверждения на вашу веб-страницу. Он прост, эффективен и удобен в использовании.

Это может помочь вам улучшить взаимодействие с пользователем и безопасность вашего веб-приложения.

Если вы хотите узнать больше о wire:confirm и платформе Livewire, вы можете посетить официальную документацию или репозиторий GitHub.

Я надеюсь, что эта заметка убедила вас попробовать. 😊

Divi WordPress Theme