Trebate obrasce za svoj sljedeći projekt? Evo kako izraditi obrasce s FormKitom.
Obrasci su pristupnik za korisnike koji se mogu uključiti u vašu aplikaciju i pružiti bitne podatke za zadatke poput stvaranja računa, obrade plaćanja i prikupljanja informacija. Ali izrada obrazaca može biti zastrašujući zadatak, koji zahtijeva opsežan šablonski kod koji oduzima puno vremena i sklon je pogreškama
FormKit nudi rješenje pružajući unaprijed izgrađene komponente koje eliminiraju potrebu za standardnim kodom. Evo kako ga koristiti.
Što je FormKit?
FormKit je open-source okvir za izradu obrazaca razvijen posebno za Vue 3, dizajniran za pojednostavljenje procesa stvaranja visokokvalitetnih obrazaca spremnih za proizvodnju. To je poboljšana verzija popularne Vue Formula biblioteku i pruža više od 25 prilagodljivih i pristupačnih opcija unosa, zajedno s unaprijed definiranim skupom pravila provjere valjanosti.
FormKit također nudi mogućnost generiranja obrazaca putem dinamičkih shema kompatibilnih s JSON-om, što olakšava brzo stvaranje složenih obrazaca. Osim toga, FormKit ima aktivnu zajednicu na Discordu, koja pruža podršku i potiče suradnju među korisnicima. Sa svojim sveobuhvatnim značajkama i sustavom podrške, FormKit je pouzdan i učinkovit alat za programere koji žele izraditi obrasce za svoje Vue 3 projekte.
Značajke okvira FormKit
U FormKitu ćete pronaći širok izbor značajki za izradu obrazaca.
1. Jednokomponentni API
Jedna od zanimljivih značajki FormKita je njegov jednokomponentni API: komponenta. Omogućuje vam pristup svim vrstama unosa. Ovo daje izravan i jednostavan pristup stvaranju elemenata obrasca umjesto upotrebe izvornih HTML elemenata.
2. Unaprijed definirana pravila provjere valjanosti
Formkit pojednostavljuje rukovanje provjerama obrazaca dopuštajući vam izravnu primjenu skupa pravila na ulaze pomoću potvrđivanja valjanosti. Ima više od 30 različitih unaprijed definiranih pravila koja možete odabrati ovisno o svojim željama. Alternativno, možete stvoriti prilagođena pravila registrirana globalno ili posebno na unosu za složena ograničenja.
3. Prilagodljive opcije oblikovanja
FormKit dolazi bez zadanih opcija stiliziranja, ali ima dodatnu osnovnu temu - Genesis. Ovo morate zasebno instalirati.
Prvom instalacijom @formkit/teme paket.
npm instalirati @formkit/themesZatim ga uvezite u svoj projekt
uvoz'@formkit/themes/genesis'Ostale mogućnosti oblikovanja uključuju korištenje prilagođenih klasa koje vam omogućuju primjenu vlastitih stilova i klasa na FormKit-ovo označavanje.
4. Generiranje sheme
Generiranje sheme FormKita izvrsna je značajka koja pojednostavljuje proces stvaranja polja obrazaca. Shema je niz objekata, pri čemu svaki objekt predstavlja HTML element i možete prikazati samo u JSON formatu.
Niz sheme sastoji se od FormKit čvornih objekata koji odgovaraju različitim elementima, kao što su HTML elementi, komponente ili tekstualni čvorovi. Ovi objekti mogu referencirati već postojeće Vue varijable i prikazati bilo koju oznaku ili komponentu s atributima i rekvizitima koji se mogu uređivati, što ga čini učinkovitom metodom izgradnje i prilagodbe obrazaca. Prema zadanim postavkama nije registriran globalno, pa ga morate uvesti.
uvoz {FormKitSchema} iz'@formkit/vue'Integracija FormKita u Vue3
Da biste počeli koristiti FormKit u aplikaciji Vue 3, prvo ga instalirajte unutar svog projekta. Ovaj odjeljak će uključivati demo korištenje nove vue aplikacije od nule.
Preduvjeti za korištenje FormKita
Prije početka provjerite imate li sljedeće:
- Temeljno razumijevanje Vue i JavaScripta
- Node.js i npm postavljeni na vašem računalu
Kada budete u fazi, spremni ste za izradu svoje prve aplikacije.
Stvaranje nove Vue aplikacije
Najprije pokrenite naredbu u nastavku na svom terminalu da inicijalizirate novu Vue aplikaciju:
npm init vue@najnovijiZatim slijedite korake navedene u upitu prema vašim željama. Nakon što je projekt u potpunosti instaliran, nastavite s instalacijom FormKita u aplikaciju.
npm instalirati @formkit/vue Dalje, u glavni.js datoteka.
uvoz {stvori aplikaciju} iz'vue'
uvoz'./style.css'
uvoz aplikacija iz'./App.vue'
// Postavljanje Formkita
uvoz {plugin, defaultConfig} iz"@formkit/vue";
// Uvoz teme Genesis
uvoz"@formkit/themes/genesis";
createApp (App).use(uključiti, defaultConfig).mount('#aplikacija')Paket @formkit/vue dolazi u paketu s dodatkom Vue i zadano konfiguriranim postavkama za besprijekornu instalaciju. Nakon što ste dovršili postavljanje, spremni ste za uključivanje komponentu u svoju Vue 3 aplikaciju. Također, možete dodati postavke za Genesis teme kao što je ranije navedeno.
Stvaranje obrazaca za višekratnu upotrebu pomoću FormKita
Ovaj odjeljak pokazuje kako koristiti FormKit u izradi funkcionalnog i prilagodljivog obrasca stvaranjem jednostavnog obrasca za registraciju.
Za bolju strukturu koda, dobro je napraviti zasebnu datoteku za ovu komponentu: RegistrationForm.vue
Prvo, definirajte ulazni element pomoću ovog formata
tip="tekst"
oznaka="Ime"
rezervirano mjesto="Abiola"
validacija="potrebna|dužina: 4"
Pomozite = "Unesite najmanje 4 znaka"
<FormKit/>Ovaj kôd pokazuje kako koristiti FormKit za generiranje unosa teksta pomoću vrste teksta. Podrška za provjeru valjanosti odvaja pravila pomoću simbola crte "|". Oznaka pomoći postavlja mali tekst odmah ispod elementa unosa.
Također, možete istražiti druge vrste unosa poput onih u nastavku.
tip="tekst"
oznaka="Prezime"
rezervirano mjesto="Ester"
validacija="potrebna|dužina: 4"
Pomozite = "Unesite najmanje 4 znaka"
/>
tip="e-pošta"
oznaka="Email adresa"
prefiks-ikona="e-pošta"
validacija="obavezna|e-pošta"
rezervirano mjesto="[email protected]"
/>
tip="datum"
oznaka="Datum rođenja"
Pomozite="Unesite svoj rođendan u formatu - DD/MM/GGGG"
validacija="potreban"
/> v-model="vrijednost"
tip="radio"
oznaka="Spol"
:opcije="['Muško Žensko']"
Pomozite="Odaberite svoj spol"
/>
tip="datoteka"
oznaka="Učitaj svoju fotografiju"
prihvatiti=".jpg,.png,.jpeg"
Pomozite="Odaberi svoju sliku"
/>
Kod pokazuje kako koristiti neke od drugih ulaznih elemenata i postaviti pravila provjere valjanosti.
FormKit uključuje dodatak tipa pod nazivom "forma" koji obavija sve ulazne elemente. Nadzire status provjere valjanosti obrasca i blokira korisnike da ga pošalju ako su neki unosi nevažeći. Osim toga, automatski generira gumb za slanje.
tip="oblik"
oblik-razreda="vanjski spremnik"
pošalji-oznaku="Registar"
@podnijeti="Registar">
Kombiniranjem svega zajedno dobiva se kompletan oblik, kao što je prikazano na slici ispod.
Generiranje obrazaca korištenjem FormKit sheme
S JSON shemama moguće je generirati obrasce slične ulaznim elementima, kao što je to učinjeno ranije. Da biste generirali obrazac, jednostavno dostavite svoj niz shema u komponentu korištenjem shema oslonac
Niz shema
konst shema = [
{
$formkit: "e-pošta",
Ime: "e-pošta",
označiti: "Email adresa",
rezerviranog mjesta: "Unesi svoj email",
provjera valjanosti: "obavezna|e-pošta",
},
{
$formkit: 'lozinka',
Ime: 'lozinka',
označiti: 'Lozinka',
provjera valjanosti: 'potrebna|dužina: 5,16'
},
{
$formkit: 'lozinka',
Ime: 'password_confirm',
označiti: 'Potvrdi lozinku',
provjera valjanosti: 'potrebno|potvrda',
validationLabel: 'potvrda lozinke',
},
];Zatim se prosljeđuje potporu u komponenti FormKit.
"oblik" oblik-razreda="vanjski spremnik"pošalji oznaku="Prijaviti se">
<FormKitSchema:shema="shema" />
FormKit> Ovo je konačni generirani izlaz:
Brži pristup izradi obrazaca u Vue3
FormKit pruža brži i učinkovitiji pristup izradi obrazaca u Vue 3. S FormKitom možete eliminirati potrebu za stvaranjem predložaka od nule, što vam omogućuje da se usredotočite na izravnu implementaciju logike. Ovaj pojednostavljeni proces ne samo da štedi vrijeme, već i povećava produktivnost.
Osim toga, FormKit omogućuje dinamičko prikazivanje obrazaca putem uvjetnog prikazivanja. Ova značajka vam omogućuje stvaranje interaktivnih i user-friendly sučelja za korisnike, gdje se elementi obrasca prikazuju ili skrivaju na temelju određenih uvjeta.