Potrebujete formuláre pre váš ďalší projekt? Tu je návod, ako vytvoriť formuláre pomocou FormKit.
Formuláre sú vstupnou bránou pre používateľov na interakciu s vašou aplikáciou a na poskytovanie základných údajov pre úlohy, ako je vytvorenie účtu, spracovanie platieb a zhromažďovanie informácií. Vytváranie formulárov však môže byť náročná úloha, ktorá si vyžaduje rozsiahly štandardný kód, ktorý je časovo náročný a náchylný na chyby
FormKit ponúka riešenie poskytnutím vopred zostavených komponentov, ktoré eliminujú potrebu štandardného kódu. Tu je návod, ako ho použiť.
Čo je FormKit?
FormKit je open source framework na vytváranie formulárov vyvinutý špeciálne pre Vue 3, navrhnutý tak, aby zjednodušil proces vytvárania vysoko kvalitných formulárov pripravených na výrobu. Ide o rozšírenú verziu populárneho Vue Formulate knižnica a poskytuje viac ako 25 prispôsobiteľných a prístupných možností vstupu spolu s preddefinovaným súborom overovacích pravidiel.
FormKit tiež ponúka možnosť vytvárať formuláre prostredníctvom dynamických schém kompatibilných s JSON, čo uľahčuje rýchle vytváranie zložitých formulárov. Okrem toho má FormKit aktívnu komunitu na Discord, ktorá poskytuje podporu a podporuje spoluprácu medzi používateľmi. Vďaka svojim komplexným funkciám a systému podpory je FormKit spoľahlivým a efektívnym nástrojom pre vývojárov, ktorí chcú vytvárať formuláre pre svoje projekty Vue 3.
Vlastnosti rámca FormKit
Vo FormKit nájdete široký výber funkcií na vytváranie formulárov.
1. Single Component API
Jednou zo zaujímavých funkcií FormKit je jeho jednozložkové API: komponent. Poskytuje vám prístup ku všetkým typom vstupov. To poskytuje priamy a jednoduchý prístup k vytváraniu prvkov formulára namiesto toho, aby ste museli používať natívne prvky HTML.
2. Preddefinované pravidlá overovania
Formkit zjednodušuje prácu s overovaním formulárov tým, že vám umožňuje priamo aplikovať súbor pravidiel na vstupy pomocou validačnej podpery. Má viac ako 30 rôznych preddefinovaných pravidiel, ktoré si môžete vybrať podľa svojich preferencií. Prípadne môžete vytvoriť vlastné pravidlá registrované globálne alebo špecificky na vstupe pre zložité obmedzenia.
3. Prispôsobiteľné možnosti štýlu
FormKit sa dodáva bez predvolených možností štýlu, ale má voliteľnú základnú tému - Genesis. Toto musíte nainštalovať samostatne.
Prvou inštaláciou @formkit/themes balík.
inštalácia npm @formkit/themesPotom ho importujte do svojho projektu
importovať'@formkit/themes/genesis'Medzi ďalšie možnosti štýlu patrí použitie vlastných tried, ktoré vám umožňujú aplikovať vaše vlastné štýly a triedy na značky poskytnuté FormKit.
4. Generovanie schémy
Generovanie schém FormKit je vynikajúca funkcia, ktorá zjednodušuje proces vytvárania polí formulára. Schéma je pole objektov, pričom každý objekt predstavuje prvok HTML a môžete reprezentovať iba vo formáte JSON.
Pole schém pozostáva z objektov uzla FormKit, ktoré zodpovedajú rôznym prvkom, ako sú prvky HTML, komponenty alebo textové uzly. Tieto objekty môžu odkazovať na už existujúce premenné Vue a vykresliť akúkoľvek značku alebo komponent s upraviteľnými atribútmi a rekvizitami, čo z nich robí efektívnu metódu vytvárania a prispôsobovania formulárov. V predvolenom nastavení nie je zaregistrovaný globálne, takže ho musíte importovať.
importovať { FormKitSchema } od'@formkit/vue'Integrácia FormKit vo Vue3
Ak chcete začať používať FormKit v aplikácii Vue 3, najprv si ho nainštalujte do svojho projektu. Táto časť bude zahŕňať ukážku s použitím novej aplikácie vu od začiatku.
Predpoklady používania FormKit
Pred začatím sa uistite, že máte nasledovné:
- Základné pochopenie Vue a JavaScriptu
- Node.js a npm nastavené na vašom počítači
Keď všetko zvládnete, ste pripravení vytvoriť svoju prvú aplikáciu.
Vytvorenie novej aplikácie Vue
Najprv spustite príkaz uvedený nižšie vo svojom termináli a inicializujte novú aplikáciu Vue:
npm init vue@najnovšiePotom postupujte podľa krokov uvedených vo výzve podľa vašich preferencií. Po kompletnej inštalácii projektu pokračujte v inštalácii FormKit do aplikácie.
inštalácia npm @formkit/vue Ďalej v main.js súbor.
importovať { createApp } od'vue'
importovať'./style.css'
importovať App od'./App.vue'
// Nastavenie Formkit
importovať { plugin, defaultConfig } od"@formkit/vue";
// Importujte tému Genesis
importovať"@formkit/themes/genesis";
createApp (App).use(zapojiť, defaultConfig).mount('#app')Balík @formkit/vue je dodávaný s doplnkom Vue a predvolene nakonfigurovaným nastavením pre bezproblémovú inštaláciu. Po dokončení nastavenia ste pripravení na začlenenie komponent do vašej aplikácie Vue 3. Môžete tiež pridať nastavenie pre témy Genesis, ako bolo uvedené vyššie.
Vytváranie opakovane použiteľných formulárov pomocou FormKit
Táto časť ukazuje, ako využiť FormKit pri vytváraní funkčného a prispôsobiteľného formulára vytvorením jednoduchého registračného formulára.
Pre lepšiu štruktúru kódu je dobré vytvoriť samostatný súbor pre tento komponent: Registračný formulár.vue
Najprv definujte vstupný prvok pomocou tohto formátu
typu="text"
štítok="Krstné meno"
zástupný symbol ="Abiola"
validácia ="požadované|dĺžka: 4"
Pomoc = "Zadajte minimálne 4 znaky"
<FormKit/>Tento kód ukazuje, ako používať FormKit na generovanie textového vstupu pomocou typu textu. Overovacia podpera oddeľuje pravidlá pomocou zvislého symbolu "|". Pomocník umiestni malý text tesne pod vstupný prvok.
Môžete tiež preskúmať ďalšie typy vstupu, ako sú tie nižšie.
typu="text"
štítok="Priezvisko"
zástupný symbol ="Ester"
validácia ="požadované|dĺžka: 4"
Pomoc = "Zadajte minimálne 4 znaky"
/>
typu="e-mail"
štítok="Emailová adresa"
predpona-ikona="e-mail"
validácia ="povinné|e-mail"
zástupný symbol ="[email protected]"
/>
typu="dátum"
štítok="Dátum narodenia"
Pomoc="Zadajte svoje narodeniny vo formáte DD/MM/RRRR"
validácia ="požadovaný"
/> v-model="hodnota"
typu="rádio"
štítok="Rod"
:možnosti="['Muž žena']"
Pomoc="Vyberte si pohlavie"
/>
typu="súbor"
štítok="Nahrajte svoju fotografiu"
prijať =".jpg,.png,.jpeg"
Pomoc="Vyberte svoj obrázok"
/>
Kód ukazuje, ako použiť niektoré ďalšie vstupné prvky a nastaviť pravidlá overovania.
FormKit obsahuje typovú podperu s názvom „formulár“, ktorá obaľuje všetky vstupné prvky. Monitoruje stav overenia formulára a blokuje používateľom jeho odoslanie, ak sú niektoré vstupy neplatné. Okrem toho automaticky vygeneruje tlačidlo odoslania.
typu="forma"
forma-trieda="vonkajší kontajner"
submit-label="Registrovať"
@Predložiť="Registrovať">
Kombináciou všetkého dohromady získate kompletnú formu, ako je znázornené na obrázku nižšie.
Generovanie formulárov pomocou schémy FormKit
Pomocou schém JSON je možné generovať formuláre podobné vstupným prvkom, ako to bolo urobené skôr. Ak chcete vygenerovať formulár, jednoducho zadajte pole schémy komponent s využitím schému rekvizita.
Pole schém
konšt schéma = [
{
$formkit: "e-mail",
názov: "e-mail",
štítok: "Emailová adresa",
zástupný symbol: "Zadajte svoj e-mail",
validácia: "povinné|e-mail",
},
{
$formkit: 'heslo',
názov: 'heslo',
štítok: 'Heslo',
validácia: 'požadované|dĺžka: 5,16'
},
{
$formkit: 'heslo',
názov: 'potvrdenie hesla',
štítok: 'Potvrďte heslo',
validácia: 'required|confirm',
validationLabel: 'potvrdenie hesla',
},
];Potom sa odovzdá rekvizite v komponente FormKit.
"forma" forma-trieda="vonkajší kontajner"submitlabel="Prihlásiť sa">
<FormKitSchema:schéma="schéma" />
FormKit> Toto je konečný vygenerovaný výstup:
Rýchlejší prístup k vytváraniu formulárov vo Vue3
FormKit poskytuje rýchlejší a efektívnejší prístup k vytváraniu formulárov vo Vue 3. S FormKit môžete eliminovať potrebu vytvárať štandardné šablóny od začiatku, čo vám umožní zamerať sa na implementáciu logiky priamo. Tento zjednodušený proces šetrí nielen čas, ale aj zvyšuje produktivitu.
FormKit navyše umožňuje dynamické vykresľovanie formulárov prostredníctvom podmieneného vykresľovania. Táto funkcia vám umožňuje vytvárať interaktívne a užívateľsky prívetivé rozhrania pre používateľov, kde sa prvky formulára zobrazujú alebo skrývajú na základe určitých podmienok.
