Een bevestigingsdialoog creëren met Livewire: een stapsgewijze handleiding

Livewire is een full-stack raamwerk voor Laravel dat het creëren van dynamische interfaces vereenvoudigt zonder Laravel te verlaten.

De mogelijkheid om bevestigingsdialogen te construeren met weinig tot geen code en zonder JavaScript is een van de functies van Livewire.

Ik zal je in een paar eenvoudige stappen in deze blogpost door het proces leiden van het maken van een bevestigingsdialoog met Livewire met behulp van de nieuwe 'wire:confirm' HTML-richtlijn die het gemakkelijker dan ooit maakt om een ​​bevestigingsdialoog toe te voegen voordat een belangrijke of gevaarlijke actie.

Livewire installeren

Om Livewire te gebruiken, moet u het in uw Laravel-project installeren. U kunt dit doen door de volgende opdracht in uw terminal uit te voeren:

composer require livewire/livewire

Hierdoor wordt Livewire als afhankelijkheid geïnstalleerd en worden de activa en configuratiebestanden gepubliceerd.

U kunt optioneel ook het volgende commando " php artisan livewire:publish --config " uitvoeren om het Livewire-configuratiebestand te publiceren, waarmee u enkele instellingen kunt aanpassen.

Met behulp van de nieuwe wire:confirm' is het super eenvoudig om het bevestigingsdialoogvenster aan uw app toe te voegen.

U kunt wire:confirm gebruiken voor een eenvoudige bevestiging met een knop "Annuleren" en "OK", gekoppeld aan een gebeurtenis zoals 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 zal een native browserbevestigingspop-up starten wanneer u op de knop klikt.

Het wordt een beetje interessanter als je de gebruiker vraagt ​​iets in te voeren om te verifiëren dat hij met opzet iets catastrofaals wil doen.

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

Met '|DELETE' weet Livewire dat de verwachte prompt overeenkomt.

Wanneer op de knop wordt geklikt, verschijnt een ' prompt() '-modal en wordt de gebruiker gevraagd om "DELETE" te schrijven. Als de invoer van de gebruiker overeenkomt, wordt de methode ' delet() ' van de Livewire-component aangeroepen.

Het bevestigingswoord of de bevestigingszin kan worden gewijzigd om een ​​dynamische waarde op de component weer te geven. U wilt bijvoorbeeld van de gebruiker verlangen dat hij de projectnaam opgeeft om het volgende te verifiëren:

Ik redeneerde dat het het gemakkelijkst zou zijn om alles in hoofdletters te zetten, omdat er een voorbehoud is: de tekstmatching is hoofdlettergevoelig. U moet HTML-entiteiten gebruiken in het kenmerk ' wire:confirm ' als u aanhalingstekens wilt gebruiken, zoals ik demonstreer.

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

Waarom zou u de Livewire 'wire:confirm' HTML-richtlijn gebruiken?

Als u op zoek bent naar een eenvoudige en effectieve manier om een ​​bevestigingsvenster toe te voegen voordat u een belangrijke of gevaarlijke actie op uw webpagina uitvoert, kunt u overwegen de HTML-richtlijn wire:confirm te gebruiken.

Deze richtlijn maakt deel uit van het Livewire-framework, een bibliotheek waarmee u eenvoudig dynamische en interactieve webapplicaties kunt bouwen met Laravel.

Met de wire:confirm richtlijn kunt u een bericht opgeven dat in een native browsermodal wordt weergegeven wanneer de gebruiker op een element klikt waaraan een Livewire-actie is gekoppeld.

Als u bijvoorbeeld een knop heeft waarmee u een record uit de database verwijdert, kunt u wire:confirm="Weet u zeker dat u dit wilt verwijderen?" op het knopelement en de gebruiker ziet een dialoogvenster waarin hem wordt gevraagd zijn actie te bevestigen voordat de Livewire-actie wordt geactiveerd.

Op deze manier kunt u onbedoelde of kwaadwillige acties voorkomen en de gebruiker meer context en duidelijkheid bieden over wat hij doet.

De wire:confirm richtlijn heeft verschillende voordelen ten opzichte van andere methoden voor het toevoegen van bevestigingsdialogen, zoals het gebruik van JavaScript of aangepaste componenten.

Ten eerste maakt het gebruik van de native browser ' Window.confirm ', die eenvoudig en consistent is in verschillende browsers en platforms.

U hoeft zich geen zorgen te maken over stijl-, compatibiliteits- of prestatieproblemen.

Ten tweede is het heel gemakkelijk te gebruiken en vereist het minimale code.

U hoeft alleen maar de richtlijn en het bericht aan het element toe te voegen, en Livewire doet de rest.

Ten derde integreert het naadloos met het Livewire-framework, wat betekent dat je het kunt gebruiken met elke Livewire-actie, zoals wire:click , wire:submit of wire:model .

Conclusie

De wire:confirm richtlijn is een geweldig hulpmiddel voor het toevoegen van bevestigingsdialogen aan uw webpagina. Het is eenvoudig, effectief en handig in gebruik.

Het kan u helpen de gebruikerservaring en de beveiliging van uw webapplicatie te verbeteren.

Als je meer wilt weten over de wire:confirm richtlijn en het Livewire-framework, kun je de officiële documentatie of de GitHub-repository bezoeken.

Ik hoop dat dit bericht je heeft overtuigd om het eens te proberen. 😊