Ustvarjanje potrditvenega pogovornega okna z Livewire: vodnik po korakih

Livewire je ogrodje s polnim skladom za Laravel , ki poenostavlja ustvarjanje dinamičnih vmesnikov, ne da bi morali zapustiti Laravel.

Sposobnost sestavljanja potrditvenih pogovornih oken z malo ali nič kode in brez JavaScripta je ena od funkcij Livewire.

Vodil vas bom skozi postopek ustvarjanja potrditvenega pogovornega okna z uporabo Livewire v nekaj preprostih korakih v tej objavi v spletnem dnevniku z uporabo nove direktive HTML 'wire:confirm', ki olajša kot kdaj koli prej dodajanje potrditvenega pogovornega okna pred izvedbo pomembnega ali nevarno dejanje.

Namestite Livewire

Če želite uporabljati Livewire, ga morate namestiti v svoj projekt Laravel. To lahko storite tako, da v terminalu zaženete naslednji ukaz:

composer require livewire/livewire

To bo namestilo Livewire kot odvisnost in objavilo njegova sredstva in konfiguracijske datoteke.

Po želji lahko zaženete tudi naslednji ukaz" php artisan livewire:publish --config ", da objavite konfiguracijsko datoteko Livewire, ki vam omogoča prilagajanje nekaterih nastavitev.

Z uporabo novega wire:confirm' je dodajanje potrditvenega pogovornega okna vaši aplikaciji izjemno enostavno.

Wire:confirm lahko uporabite za preprosto potrditev, ki ima gumba »Prekliči« in »V redu«, skupaj z dogodkom, kot je 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 bo sprožil izvorno potrditveno pojavno okno brskalnika, ko kliknete gumb.

Stvari postanejo nekoliko bolj zanimive, če uporabnika prosite, naj vnese nekaj, da preveri, ali želi namenoma narediti nekaj katastrofalnega.

<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' sporoči Livewireju , da se pričakovani poziv ujema.

Ko je gumb kliknjen, se bo prikazal modal ' prompt() ', ki bo od uporabnika zahteval, da napiše "DELETE." Če uporabnikov vnos ustreza, bo poklicana metoda » delete() « komponente Livewire.

Potrditveno besedo ali frazo je mogoče spremeniti tako, da odraža dinamično vrednost komponente. Na primer, morda boste želeli zahtevati, da uporabnik navede ime projekta, da preveri:

Razmišljal sem, da bi bilo najlažje, če bi vse napisali z velikimi črkami, ker obstaja opozorilo: ujemanje besedila razlikuje med velikimi in malimi črkami. Entitete HTML morate uporabiti v atributu ' wire:confirm ', če želite uporabiti narekovaje, kot jih prikazujem.

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

Zakaj bi morali uporabiti direktivo HTML Livewire 'wire:confirm'?

Če iščete preprost in učinkovit način za dodajanje potrditvenega pogovornega okna, preden izvedete pomembno ali nevarno dejanje na vaši spletni strani, razmislite o uporabi direktive HTML wire:confirm .

Ta direktiva je del ogrodja Livewire, ki je knjižnica, ki omogoča enostavno gradnjo dinamičnih in interaktivnih spletnih aplikacij z uporabo Laravela.

Direktiva wire:confirm vam omogoča, da določite sporočilo, ki bo prikazano v izvornem načinu brskalnika, ko uporabnik klikne element, ki ima priloženo dejanje Livewire.

Na primer, če imate gumb, ki izbriše zapis iz zbirke podatkov, lahko dodate wire:confirm="Ali ste prepričani, da želite to izbrisati?" na element gumba in uporabnik bo videl pogovorno okno, ki ga bo pozvalo, naj potrdi svoje dejanje, preden se sproži dejanje Livewire.

Na ta način lahko preprečite naključna ali zlonamerna dejanja ter uporabniku zagotovite več konteksta in jasnosti o tem, kaj počne.

Direktiva wire:confirm ima več prednosti pred drugimi metodami dodajanja potrditvenih pogovornih oken, kot je uporaba JavaScripta ali komponent po meri.

Prvič, uporablja izvorni način brskalnika Window.confirm , ki je preprost in dosleden v različnih brskalnikih in platformah.

Ni vam treba skrbeti glede stila, združljivosti ali težav z zmogljivostjo.

Drugič, je zelo enostaven za uporabo in zahteva minimalno kodo.

Dodati morate le direktivo in sporočilo elementu, Livewire pa bo poskrbel za ostalo.

Tretjič, brezhibno se integrira z ogrodjem Livewire, kar pomeni, da ga lahko uporabljate s katerim koli dejanjem Livewire, kot je wire:click , wire:submit ali wire:model .

Zaključek

Direktiva wire:confirm je odlično orodje za dodajanje potrditvenih pogovornih oken na vašo spletno stran. Je preprost, učinkovit in priročen za uporabo.

Lahko vam pomaga izboljšati uporabniško izkušnjo in varnost vaše spletne aplikacije.

Če želite izvedeti več o direktivi wire:confirm in ogrodju Livewire, lahko obiščete uradno dokumentacijo ali repozitorij GitHub.

Upam, da vas je ta zapis prepričal, da poskusite. 😊