Erstellen eines Bestätigungsdialogs mit Livewire: Eine Schritt-für-Schritt-Anleitung

Livewire ist ein Full-Stack-Framework für Laravel , das die Erstellung dynamischer Schnittstellen vereinfacht, ohne Laravel zu verlassen.

Die Möglichkeit, Bestätigungsdialoge mit wenig bis gar keinem Code und ohne JavaScript zu erstellen, ist eine der Funktionen von Livewire.

Ich werde Sie in diesem Blogbeitrag in ein paar einfachen Schritten durch den Prozess der Erstellung eines Bestätigungsdialogs mit Livewire führen und dabei die neue HTML-Direktive „wire:confirm“ verwenden, die es einfacher denn je macht, einen Bestätigungsdialog hinzuzufügen, bevor Sie eine wichtige oder wichtige Aufgabe ausführen gefährliche Aktion.

Installieren Sie Livewire

Um Livewire verwenden zu können, müssen Sie es in Ihrem Laravel-Projekt installieren. Sie können dies tun, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

composer require livewire/livewire

Dadurch wird Livewire als Abhängigkeit installiert und seine Assets und Konfigurationsdateien veröffentlicht.

Sie können optional auch den folgenden Befehl „ php artisan livewire:publish --config “ ausführen, um die Livewire-Konfigurationsdatei zu veröffentlichen, wodurch Sie einige Einstellungen anpassen können.

Durch die Verwendung des neuen „ wire:confirm“ ist das Hinzufügen des Bestätigungsdialogfelds zu Ihrer App ganz einfach.

Sie können „wire:confirm“ für eine einfache Bestätigung verwenden, die über die Schaltflächen „Abbrechen“ und „OK“ verfügt, gekoppelt mit einem Ereignis wie „wire:click“:

<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 startet ein natives Browser-Bestätigungs-Popup, wenn Sie auf die Schaltfläche klicken.

Etwas interessanter wird es, wenn Sie den Benutzer bitten, etwas einzugeben, um zu bestätigen, dass er absichtlich etwas Katastrophales tun möchte.

<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>

Das „|DELETE“ teilt Livewire mit, dass die erwartete Eingabeaufforderung übereinstimmen soll.

Wenn auf die Schaltfläche geklickt wird, erscheint ein modales „ prompt() “ und fordert den Benutzer auf, „DELETE“ einzugeben. Sollte die Eingabe des Benutzers übereinstimmen, wird die Methode „ delete() “ der Livewire-Komponente aufgerufen.

Das Bestätigungswort oder die Bestätigungsphrase könnte geändert werden, um einen dynamischen Wert der Komponente widerzuspiegeln. Beispielsweise möchten Sie möglicherweise, dass der Benutzer den Projektnamen angibt, um Folgendes zu überprüfen:

Ich kam zu dem Schluss, dass es am einfachsten wäre, alles in Großbuchstaben zu schreiben, da es eine Einschränkung gibt: Bei der Textübereinstimmung wird die Groß-/Kleinschreibung beachtet. Sie müssen HTML-Entitäten im Attribut „ wire:confirm “ verwenden, wenn Sie Anführungszeichen verwenden möchten, wie ich es demonstriere.

<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>

Warum sollten Sie die Livewire-HTML-Direktive „wire:confirm“ verwenden?

Wenn Sie nach einer einfachen und effektiven Möglichkeit suchen, einen Bestätigungsdialog hinzuzufügen, bevor Sie eine wichtige oder gefährliche Aktion auf Ihrer Webseite ausführen, sollten Sie die Verwendung der HTML-Direktive wire:confirm in Betracht ziehen.

Diese Direktive ist Teil des Livewire-Frameworks, einer Bibliothek, die es einfach macht, dynamische und interaktive Webanwendungen mit Laravel zu erstellen.

Mit der Direktive wire:confirm können Sie eine Nachricht angeben, die in einem nativen Browser-Modal angezeigt wird, wenn der Benutzer auf ein Element klickt, an das eine Livewire-Aktion angehängt ist.

Wenn Sie beispielsweise über eine Schaltfläche zum Löschen eines Datensatzes aus der Datenbank verfügen, können Sie „wire:confirm="Sind Sie sicher, dass Sie diesen löschen möchten?" hinzufügen. auf das Schaltflächenelement und der Benutzer sieht ein Dialogfeld, in dem er aufgefordert wird, seine Aktion zu bestätigen, bevor die Livewire-Aktion ausgelöst wird.

Auf diese Weise können Sie versehentliche oder böswillige Aktionen verhindern und dem Benutzer mehr Kontext und Klarheit darüber bieten, was er tut.

Die Direktive wire:confirm bietet mehrere Vorteile gegenüber anderen Methoden zum Hinzufügen von Bestätigungsdialogen, beispielsweise der Verwendung von JavaScript oder benutzerdefinierten Komponenten.

Erstens verwendet es das native Browser-Modal „ Window.confirm “, das einfach und konsistent über verschiedene Browser und Plattformen hinweg ist.

Sie müssen sich keine Gedanken über Stil-, Kompatibilitäts- oder Leistungsprobleme machen.

Zweitens ist es sehr einfach zu verwenden und erfordert nur minimalen Code.

Sie müssen nur die Direktive und die Nachricht zum Element hinzufügen, und Livewire kümmert sich um den Rest.

Drittens lässt es sich nahtlos in das Livewire-Framework integrieren, was bedeutet, dass Sie es mit jeder Livewire-Aktion verwenden können, wie etwa wire:click , wire:submit “ oder wire:model “.

Abschluss

Die Direktive wire:confirm ist ein großartiges Tool zum Hinzufügen von Bestätigungsdialogen zu Ihrer Webseite. Es ist einfach, effektiv und bequem in der Anwendung.

Es kann Ihnen helfen, das Benutzererlebnis und die Sicherheit Ihrer Webanwendung zu verbessern.

Wenn Sie mehr über die Direktive wire:confirm und das Livewire-Framework erfahren möchten, können Sie die offizielle Dokumentation oder das GitHub-Repository besuchen.

Ich hoffe, dieser Hinweis hat Sie überzeugt, es auszuprobieren. 😊