Kas vajate järgmise projekti jaoks vorme? Siit saate teada, kuidas FormKiti abil vorme luua.
Vormid on värav, mille kaudu kasutajad saavad teie rakendusega suhelda ja pakkuda olulisi andmeid selliste toimingute jaoks nagu konto loomine, maksete töötlemine ja teabe kogumine. Kuid vormide koostamine võib olla hirmuäratav ülesanne, mis nõuab ulatuslikku standardkoodi, mis on aeganõudev ja veaohtlik
FormKit pakub lahendust, pakkudes eelehitatud komponente, mis välistavad vajaduse standardkoodi järele. Siin on, kuidas seda kasutada.
Mis on FormKit?
FormKit on spetsiaalselt Vue 3 jaoks välja töötatud avatud lähtekoodiga vormide koostamise raamistik, mis on loodud kvaliteetsete tootmisvalmis vormide loomise protsessi lihtsustamiseks. See on populaarse täiustatud versioon Vue valem raamatukogu ja pakub üle 25 kohandatava ja juurdepääsetava sisestusvaliku koos eelmääratletud valideerimisreeglite komplektiga.
FormKit pakub ka võimalust genereerida vorme JSON-iga ühilduvate dünaamiliste skeemide kaudu, muutes keerukate vormide kiire loomise lihtsaks. Lisaks on FormKitis Discordis aktiivne kogukond, mis pakub tuge ja soodustab kasutajate vahelist koostööd. Oma terviklike funktsioonide ja tugisüsteemiga on FormKit usaldusväärne ja tõhus tööriist arendajatele, kes soovivad oma Vue 3 projektide jaoks vorme koostada.
FormKiti raamistiku omadused
FormKitist leiate laia valiku vormi koostamise funktsioone.
1. Ühekomponendiline API
Üks FormKiti huvitavaid funktsioone on selle ühekomponendiline API: komponent. See annab teile juurdepääsu kõikidele sisestustüüpidele. See annab natiivsete HTML-elementide kasutamise asemel otsese ja lihtsa juurdepääsu vormielementide loomisele.
2. Eelnevalt määratletud valideerimisreeglid
Formkit lihtsustab vormide kinnitamise käsitlemist võimaldades teil valideerimisrekvisiidi abil sisenditele reeglite kogumit otse rakendada. Sellel on üle 30 erineva eelmääratletud reegli, mille saate vastavalt oma eelistustele valida. Teise võimalusena saate luua kohandatud reegleid, mis on registreeritud globaalselt või spetsiaalselt keeruliste piirangute jaoks.
3. Kohandatavad stiilivalikud
FormKit ei sisalda vaikestiilivalikuid, kuid sellel on valikuline põhiteema - Genesis. Peate selle eraldi installima.
Esmalt installides @formkit/themes pakett.
npm installimine @formkit/themesSeejärel importige see oma projekti
importida'@formkit/themes/genesis'Muud stiilivalikud hõlmavad kohandatud klasside kasutamist, mis võimaldab teil rakendada oma stiile ja klasse FormKiti pakutavale märgistusele.
4. Skeemi genereerimine
FormKiti skeemi genereerimine on suurepärane funktsioon, mis lihtsustab vormiväljade loomise protsessi. Skeem on objektide massiiv, kus iga objekt esindab HTML-i elementi ja saate esitada ainult JSON-vormingus.
Skeemi massiiv koosneb FormKiti sõlmeobjektidest, mis vastavad erinevatele elementidele, nagu HTML-elemendid, komponendid või tekstisõlmed. Need objektid võivad viidata juba olemasolevatele Vue muutujatele ja muuta mis tahes märgistuse või komponendi redigeeritavate atribuutide ja rekvisiitidega, muutes selle tõhusaks meetodiks vormide koostamiseks ja kohandamiseks. Vaikimisi pole see globaalselt registreeritud, seega peate selle importima.
importida { FormKitSchema } alates'@formkit/vue'FormKiti integreerimine Vue3-sse
FormKiti kasutamise alustamiseks Vue 3 rakenduses installige see esmalt oma projekti. See jaotis hõlmab demo, kasutades uut vue rakendust nullist.
Eeltingimused FormKiti kasutamiseks
Enne alustamist veenduge, et teil on järgmised asjad:
- Vue ja JavaScripti põhiteadmised
- Node.js ja npm on teie arvutis seadistatud
Kui olete kursis, olete valmis looma oma esimese rakenduse.
Uue Vue rakenduse loomine
Esmalt käivitage oma terminalis allolev käsk uue Vue rakenduse initsialiseerimiseks:
npm init vue@viimatiSeejärel järgige vastavalt oma eelistustele viipas määratud samme. Pärast projekti täielikku installimist jätkake FormKiti installimisega rakenduses.
npm installimine @formkit/vue Järgmisena main.js faili.
importida { CreateApp } alates'vue'
importida'./style.css'
importida Rakendus alates'./App.vue'
// Vormikomplekti seadistamine
importida { plugin, defaultConfig } alates"@formkit/vue";
// Importige Genesise teema
importida"@formkit/themes/genesis";
createApp (App).use(sisse panema, defaultConfig).mount('#rakendus')Pakett @formkit/vue kaasas on Vue pistikprogramm ja vaikimisi konfigureeritud seadistus sujuvaks installimiseks. Kui olete seadistamise lõpetanud, olete kõik valmis lisama komponenti oma Vue 3 rakendusse. Samuti saate lisada Genesise teemade seadistuse, nagu varem öeldud.
Korduvkasutatavate vormide loomine FormKiti abil
See jaotis näitab, kuidas kasutada FormKiti funktsionaalse ja kohandatava vormi loomisel, luues lihtsa registreerimisvormi.
Parema koodistruktuuri jaoks on hea luua selle komponendi jaoks eraldi fail: RegistrationForm.vue
Esiteks määrake selle vormingu abil sisendelement
tüüp="tekst"
etikett="Eesnimi"
kohatäide="Abiola"
valideerimine="nõutav|pikkus: 4"
abi = "Sisestage vähemalt 4 tähemärki"
<FormKit/>See kood näitab, kuidas kasutada FormKiti tekstisisestuse loomiseks teatud tüüpi teksti abil. Valideerimisrekvisiit eraldab reeglid toru sümboli "|" abil. Abiprogramm asetab väikese teksti sisendelemendi alla.
Samuti saate uurida teisi sisestustüüpe, nagu allpool toodud.
tüüp="tekst"
etikett="Perekonnanimi"
kohatäide="Ester"
valideerimine="nõutav|pikkus: 4"
abi = "Sisestage vähemalt 4 tähemärki"
/>
tüüp="e-post"
etikett="E-posti aadress"
prefix-icon="e-post"
valideerimine="nõutav|e-post"
kohatäide="[email protected]"
/>
tüüp="kuupäev"
etikett="Sünnikuupäev"
abi="Sisestage oma sünnipäev vormingus PP/KK/AAAA"
valideerimine="nõutud"
/> v-mudel="väärtus"
tüüp="raadio"
etikett="Sugu"
:valikud="['Mees naine']"
abi="Valige oma sugu"
/>
tüüp="fail"
etikett="Laadi oma foto üles"
aktsepteeri =".jpg,.png,.jpeg"
abi="Vali oma pilt"
/>
Kood näitab, kuidas kasutada mõnda muud sisendelementi ja määrata valideerimisreegleid.
FormKit sisaldab tüüpi rekvisiite nimega "vorm", mis mähib kõik sisendelemendid. See jälgib vormi kinnitamise olekut ja blokeerib kasutajatel selle esitamise, kui mõni sisend on kehtetu. Lisaks genereerib see automaatselt saatmisnupu.
tüüp="vorm"
vorm-klass="välimine konteiner"
esita-silt="Registreeri"
@Esita="Registreeri">
Kõikide ühendamisel saadakse täielik vorm, nagu on näidatud alloleval pildil.
Vormi genereerimine FormKiti skeemi abil
JSON-skeemide abil on võimalik genereerida sisendelementidega sarnaseid vorme, nagu varem tehtud. Vormi genereerimiseks sisestage lihtsalt oma skeemi massiiv komponenti kasutades skeem prop.
Skeemi massiiv
konst skeem = [
{
$formkit: "e-post",
nimi: "e-post",
silt: "E-posti aadress",
kohatäide: "Sisesta oma email",
kinnitamine: "nõutav|e-post",
},
{
$formkit: 'parool',
nimi: 'parool',
silt: "Parool",
kinnitamine: 'nõutav|pikkus: 5,16'
},
{
$formkit: 'parool',
nimi: 'password_confirm',
silt: 'Kinnita salasõna',
kinnitamine: 'nõutav|kinnita',
validationLabel: 'Salasõna kinnitamine',
},
];Seejärel edastatakse see komponendis FormKit rekvisiidile.
"vorm" vorm-klass="välimine konteiner"esitamismärgis="Logi sisse">
<FormKitSchema:skeem="skeem" />
FormKit> See on lõplik genereeritud väljund:
Kiirem lähenemine vormide ehitamisele Vue3-s
FormKit pakub kiiremat ja tõhusamat lähenemist vormide ehitamisele Vue 3-s. FormKiti abil saate kaotada vajaduse luua nullist standardplaate, võimaldades teil keskenduda loogika otsesele rakendamisele. See sujuvam protsess mitte ainult ei säästa aega, vaid suurendab ka tootlikkust.
Lisaks võimaldab FormKit vormide dünaamilist renderdamist tingimusliku renderdamise kaudu. See funktsioon võimaldab luua kasutajatele interaktiivseid ja kasutajasõbralikke liideseid, kus vormielemendid teatud tingimustel kuvatakse või peidetakse.
