Nepieciešamas veidlapas nākamajam projektam? Lūk, kā izveidot veidlapas, izmantojot FormKit.
Veidlapas ir vārteja, lai lietotāji varētu mijiedarboties ar jūsu lietojumprogrammu un sniegt svarīgus datus tādiem uzdevumiem kā konta izveide, maksājumu apstrāde un informācijas apkopošana. Bet veidņu veidošana var būt biedējošs uzdevums, jo tam ir nepieciešams plašs standarta kods, kas ir laikietilpīgs un kļūdāms.
FormKit piedāvā risinājumu, nodrošinot iepriekš iebūvētus komponentus, kas novērš nepieciešamību pēc standarta koda. Lūk, kā to izmantot.
Kas ir FormKit?
FormKit ir atvērtā pirmkoda veidlapu veidošanas ietvars, kas īpaši izstrādāts Vue 3 un ir paredzēts, lai vienkāršotu augstas kvalitātes, ražošanai gatavu veidlapu izveides procesu. Tā ir populārā uzlabota versija Vue formula bibliotēku un nodrošina vairāk nekā 25 pielāgojamas un pieejamas ievades opcijas, kā arī iepriekš noteiktu validācijas noteikumu kopu.
FormKit piedāvā arī iespēju ģenerēt veidlapas, izmantojot ar JSON saderīgas dinamiskas shēmas, tādējādi atvieglojot sarežģītu veidlapu ātru izveidi. Turklāt FormKit ir aktīva Discord kopiena, kas sniedz atbalstu un veicina sadarbību starp lietotājiem. Ar tās visaptverošajām funkcijām un atbalsta sistēmu FormKit ir uzticams un efektīvs rīks izstrādātājiem, kuri vēlas izveidot veidlapas saviem Vue 3 projektiem.
FormKit Framework iezīmes
FormKit atradīsit plašu veidlapu veidošanas līdzekļu izvēli.
1. Viena komponenta API
Viena no interesantajām FormKit funkcijām ir tā vienkomponenta API: komponents. Tas nodrošina piekļuvi visiem ievades veidiem. Tas nodrošina tiešu un vieglu piekļuvi veidlapas elementu izveidei, nevis jāizmanto vietējie HTML elementi.
2. Iepriekš noteikti validācijas noteikumi
Formkit vienkāršo veidlapu validāciju apstrādi ļaujot ievadei tieši piemērot noteikumu kopu, izmantojot validācijas ieteikumu. Tam ir vairāk nekā 30 dažādi iepriekš definēti noteikumi, kurus varat izvēlēties atkarībā no jūsu vēlmēm. Varat arī izveidot pielāgotas kārtulas, kas reģistrētas globāli vai īpaši, izmantojot ievadi sarežģītiem ierobežojumiem.
3. Pielāgojamas stila opcijas
FormKit nav noklusējuma stila opciju, taču tam ir izvēles pamata motīvs - Genesis. Jums tas jāinstalē atsevišķi.
Vispirms instalējot @formkit/themes iepakojums.
npm instalēšana @formkit/themesPēc tam importējiet to savā projektā
imports'@formkit/themes/genesis'Citas stila iespējas ietver pielāgotu klašu izmantošanu, kas ļauj lietot savus stilus un klases FormKit nodrošinātajam marķējumam.
4. Shēmas ģenerēšana
FormKit shēmas ģenerēšana ir lieliska funkcija, kas vienkāršo veidlapas lauku izveides procesu. Shēma ir objektu masīvs, kur katrs objekts attēlo HTML elementu un jūs varat pārstāvēt tikai JSON formātā.
Shēmas masīvs sastāv no FormKit mezglu objektiem, kas atbilst dažādiem elementiem, piemēram, HTML elementiem, komponentiem vai teksta mezgliem. Šie objekti var atsaukties uz jau esošiem Vue mainīgajiem un renderēt jebkuru marķējumu vai komponentu ar rediģējamiem atribūtiem un rekvizītiem, padarot to par efektīvu veidlapu veidošanas un pielāgošanas metodi. Pēc noklusējuma tas nav reģistrēts globāli, tāpēc jums tas ir jāimportē.
imports { FormKitSchema } no'@formkit/vue'FormKit integrēšana Vue3
Lai sāktu lietot FormKit Vue 3 lietojumprogrammā, vispirms instalējiet to savā projektā. Šajā sadaļā būs iekļauta demonstrācija, izmantojot jaunu vue lietojumprogrammu no jauna.
Priekšnosacījumi FormKit lietošanai
Pirms sākat, pārliecinieties, ka jums ir:
- Pamata izpratne par Vue un JavaScript
- Node.js un npm ir iestatīti jūsu datorā
Kad esat pabeidzis ātrumu, esat gatavs izveidot savu pirmo lietotni.
Jaunas Vue lietojumprogrammas izveide
Vispirms terminālī palaidiet tālāk norādīto komandu, lai inicializētu jaunu Vue lietojumprogrammu:
npm init vue@jaunākaisPēc tam veiciet uzvednē norādītās darbības atbilstoši savām vēlmēm. Kad projekts ir pilnībā instalēts, turpiniet instalēt FormKit lietojumprogrammā.
npm instalēšana @formkit/vue Tālāk, sadaļā galvenais.js failu.
imports { CreateApp } no'vue'
imports'./style.css'
imports App no'./App.vue'
// Veidlapu komplekta iestatīšana
imports { spraudnis, noklusējuma konfigurācija } no"@formkit/vue";
// Importējiet Genesis tēmu
imports"@formkit/themes/genesis";
CreateApp (App).use(iespraust, defaultConfig).mount("#app")Sūtījums @formkit/vue nāk komplektā ar Vue spraudni un noklusējuma konfigurētu iestatījumu netraucētai instalēšanai. Kad esat pabeidzis iestatīšanu, viss ir gatavs iekļaut komponentu savā Vue 3 lietojumprogrammā. Varat arī pievienot Genesis motīvu iestatījumus, kā minēts iepriekš.
Atkārtoti lietojamu veidlapu izveide, izmantojot FormKit
Šajā sadaļā ir parādīts, kā izmantot FormKit, veidojot funkcionālu un pielāgojamu veidlapu, izveidojot vienkāršu reģistrācijas veidlapu.
Lai koda struktūra būtu labāka, šim komponentam ir ieteicams izveidot atsevišķu failu: Reģistrācijas forma.vue
Pirmkārt, definējiet ievades elementu, izmantojot šo formātu
veids="teksts"
etiķete="Vārds"
vietturis="Abiola"
validācija="nepieciešams|garums: 4"
palīdzēt = "Ievadiet vismaz 4 rakstzīmes"
<FormKit/>Šis kods parāda, kā izmantot FormKit, lai ģenerētu teksta ievadi, izmantojot teksta veidu. Validācijas balsts atdala noteikumus, izmantojot caurules simbolu "|". Palīdzības rekvizīts novieto nelielu tekstu tieši zem ievades elementa.
Varat arī izpētīt citus ievades veidus, piemēram, tālāk norādītos.
veids="teksts"
etiķete="Uzvārds"
vietturis="Estere"
validācija="nepieciešams|garums: 4"
palīdzēt = "Ievadiet vismaz 4 rakstzīmes"
/>
veids="e-pasts"
etiķete="Epasta adrese"
prefikss-icon="e-pasts"
validācija="obligāts|e-pasts"
vietturis="[email protected]"
/>
veids="datums"
etiķete="Dzimšanas datums"
palīdzēt="Ievadiet savu dzimšanas dienu šādā formātā: DD/MM/GGGG"
validācija="obligāti"
/> v-modelis="vērtība"
veids="radio"
etiķete="Dzimums"
:opcijas="['Vīrietis sieviete']"
palīdzēt="Izvēlieties dzimumu"
/>
veids="fails"
etiķete="Augšupielādējiet savu fotoattēlu"
pieņemt =".jpg,.png,.jpeg"
palīdzēt="Izvēlieties attēlu"
/>
Kods parāda, kā izmantot dažus citus ievades elementus un iestatīt validācijas noteikumus.
FormKit ietver tipa atbalstu, ko sauc par "veidlapu", kas iesaiņo visus ievades elementus. Tas uzrauga veidlapas validācijas statusu un neļauj lietotājiem to iesniegt, ja kāda ievade ir nederīga. Turklāt tas automātiski ģenerē iesniegšanas pogu.
veids="veidlapa"
forma-klasē="ārējais konteiners"
Iesniegt-label="Reģistrēties"
@Iesniegt="Reģistrēties">
Apvienojot visu kopā, tiek parādīta pilnīga veidlapa, kā parādīts zemāk esošajā attēlā.
Veidlapu ģenerēšana, izmantojot FormKit shēmu
Izmantojot JSON shēmas, ir iespējams ģenerēt ievades elementiem līdzīgas formas, kā tas tika darīts iepriekš. Lai ģenerētu veidlapu, vienkārši norādiet savu shēmu masīvu komponentu, izmantojot shēma prop.
Shēmu masīvs
konst shēma = [
{
$formkit: "e-pasts",
nosaukums: "e-pasts",
etiķete: "Epasta adrese",
vietturis: "Ievadi savu epastu",
validācija: "obligāts|e-pasts",
},
{
$formkit: 'parole',
nosaukums: 'parole',
etiķete: "Parole",
validācija: 'nepieciešams|garums: 5,16'
},
{
$formkit: 'parole',
nosaukums: 'password_confirm',
etiķete: 'Apstipriniet paroli',
validācija: 'nepieciešams|apstiprināt',
validācijas etiķete: 'paroles apstiprināšana',
},
];Pēc tam tas tiek nodots atbalstam FormKit komponentā.
"veidlapa" forma-klasē="ārējais konteiners"iesniegtlabel="Pieslēgties">
<FormKitSchema:shēma="shēma" />
FormKit> Šī ir galīgā ģenerētā izvade:
Ātrāka pieeja veidlapu veidošanai pakalpojumā Vue3
FormKit nodrošina ātrāku un efektīvāku pieeju veidlapu veidošanai Vue 3. Izmantojot FormKit, jūs varat novērst vajadzību izveidot veidņu veidnes no jauna, ļaujot koncentrēties uz loģikas tiešu ieviešanu. Šis racionalizētais process ne tikai ietaupa laiku, bet arī uzlabo produktivitāti.
Turklāt FormKit ļauj dinamiski atveidot formas, izmantojot nosacījumu renderēšanu. Šī funkcija ļauj lietotājiem izveidot interaktīvas un lietotājam draudzīgas saskarnes, kurās veidlapas elementi tiek rādīti vai paslēpti, pamatojoties uz noteiktiem nosacījumiem.