Potřebujete formuláře pro svůj další projekt? Zde je návod, jak vytvořit formuláře pomocí FormKit.
Formuláře jsou vstupní branou pro uživatele k interakci s vaší aplikací a poskytují základní data pro úkoly, jako je vytvoření účtu, zpracování plateb a shromažďování informací. Vytváření formulářů však může být skličující úkol, který vyžaduje rozsáhlý standardní kód, který je časově náročný a náchylný k chybám
FormKit nabízí řešení tím, že poskytuje předem sestavené komponenty, které eliminují potřebu standardního kódu. Zde je návod, jak jej používat.
Co je FormKit?
FormKit je open-source rámec pro vytváření formulářů vyvinutý speciálně pro Vue 3, navržený tak, aby zjednodušil proces vytváření vysoce kvalitních formulářů připravených k výrobě. Je to vylepšená verze populárního Formulovat Vue knihovna a poskytuje více než 25 přizpůsobitelných a přístupných možností vstupu spolu s předdefinovanou sadou ověřovacích pravidel.
FormKit také nabízí možnost generovat formuláře prostřednictvím dynamických schémat kompatibilních s JSON, což usnadňuje rychlé vytváření složitých formulářů. FormKit má navíc aktivní komunitu na Discordu, která poskytuje podporu a podporuje spolupráci mezi uživateli. Se svými komplexními funkcemi a systémem podpory je FormKit spolehlivým a účinným nástrojem pro vývojáře, kteří chtějí vytvářet formuláře pro své projekty Vue 3.
Funkce FormKit Framework
Ve FormKit najdete široký výběr funkcí pro vytváření formulářů.
1. Single Component API
Jednou ze zajímavých funkcí FormKit je jeho jednosložkové API: komponent. Poskytuje vám přístup ke všem typům vstupů. To poskytuje přímý a snadný přístup k vytváření prvků formuláře namísto nutnosti používat nativní prvky HTML.
2. Předdefinovaná pravidla ověřování
Formkit zjednodušuje manipulaci s ověřováním formulářů tím, že vám umožní přímo aplikovat sadu pravidel na vstupy pomocí validačního prop. Má více než 30 různých předdefinovaných pravidel, která si můžete vybrat podle svých preferencí. Případně můžete vytvořit vlastní pravidla registrovaná globálně nebo konkrétně na vstupu pro složitá omezení.
3. Přizpůsobitelné možnosti stylu
FormKit je dodáván bez výchozích možností stylu, ale má volitelný základní motiv - Genesis. Musíte to nainstalovat samostatně.
První instalací @formkit/themes balík.
instalace npm @formkit/themesPoté jej importujte do svého projektu
import'@formkit/themes/genesis'Mezi další možnosti stylů patří použití vlastních tříd, které vám umožňují aplikovat vaše vlastní styly a třídy na značky poskytnuté FormKit.
4. Generování schématu
Generování schémat FormKit je vynikající funkcí, která zjednodušuje proces vytváření polí formuláře. Schéma je pole objektů, přičemž každý objekt představuje prvek HTML a můžete reprezentovat pouze ve formátu JSON.
Pole schémat se skládá z objektů uzlů FormKit, které odpovídají různým prvkům, jako jsou prvky HTML, komponenty nebo textové uzly. Tyto objekty mohou odkazovat na již existující proměnné Vue a vykreslovat jakékoli značky nebo komponenty s upravitelnými atributy a rekvizitami, což z nich činí efektivní metodu vytváření a přizpůsobení formulářů. Ve výchozím nastavení není registrován globálně, takže jej musíte importovat.
import { FormKitSchema } z'@formkit/vue'Integrace FormKit do Vue3
Chcete-li začít používat FormKit v aplikaci Vue 3, nejprve jej nainstalujte do svého projektu. Tato sekce bude zahrnovat demo s použitím nové aplikace vue od nuly.
Předpoklady pro používání FormKit
Než začnete, ujistěte se, že máte následující:
- Základní znalost Vue a JavaScriptu
- Node.js a npm nastavit na vašem počítači
Jakmile budete připraveni, jste připraveni vytvořit svou první aplikaci.
Vytvoření nové aplikace Vue
Nejprve spusťte níže uvedený příkaz ve svém terminálu a inicializujte novou aplikaci Vue:
npm init vue@nejnovějšíPoté postupujte podle pokynů uvedených ve výzvě podle vašich preferencí. Po kompletní instalaci projektu pokračujte v instalaci FormKit do aplikace.
instalace npm @formkit/vue Dále v main.js soubor.
import { createApp } z'vue'
import'./style.css'
import Aplikace z'./App.vue'
// Nastavení Formkit
import { plugin, defaultConfig } z"@formkit/vue";
// Import motivu Genesis
import"@formkit/themes/genesis";
createApp (App).use(zapojit, defaultConfig).mount('#aplikace')Balík @formkit/vue je dodáván s pluginem Vue a výchozím nakonfigurovaným nastavením pro bezproblémovou instalaci. Jakmile dokončíte nastavení, můžete vše začlenit komponentu do vaší aplikace Vue 3. Můžete také přidat nastavení pro motivy Genesis, jak bylo uvedeno výše.
Vytváření opakovaně použitelných formulářů pomocí FormKit
Tato část ukazuje, jak využít FormKit při vytváření funkčního a přizpůsobitelného formuláře vytvořením jednoduchého registračního formuláře.
Pro lepší strukturu kódu je dobré pro tuto komponentu vytvořit samostatný soubor: RegistrationForm.vue
Nejprve definujte vstupní prvek pomocí tohoto formátu
typ="text"
štítek="Jméno"
zástupný symbol="Abiola"
validace ="požadovaná|délka: 4"
Pomoc = "Zadejte minimálně 4 znaky"
<FormKit/>Tento kód ukazuje, jak pomocí FormKit generovat textový vstup pomocí typu textu. Ověřovací podpěra odděluje pravidla pomocí svislého symbolu "|". Nápověda umístí malý text těsně pod vstupní prvek.
Můžete také prozkoumat další typy vstupu, jako jsou ty níže.
typ="text"
štítek="Příjmení"
zástupný symbol="Ester"
validace ="požadovaná|délka: 4"
Pomoc = "Zadejte minimálně 4 znaky"
/>
typ="e-mailem"
štítek="Emailová adresa"
prefix-ikona="e-mailem"
validace ="vyžadováno|e-mail"
zástupný symbol="[email protected]"
/>
typ="datum"
štítek="Datum narození"
Pomoc="Zadejte své narozeniny ve formátu DD/MM/RRRR"
validace ="Požadované"
/> v-model="hodnota"
typ="rádio"
štítek="Rod"
:možnosti="['Muž žena']"
Pomoc="Vyber své pohlaví"
/>
typ="soubor"
štítek="Nahrajte svou fotografii"
přijmout =".jpg,.png,.jpeg"
Pomoc="Vyberte svůj obrázek"
/>
Kód ukazuje, jak použít některé další vstupní prvky a nastavit pravidla ověřování.
FormKit obsahuje typovou podpěru nazvanou „form“, která obaluje všechny vstupní prvky. Sleduje stav ověření formuláře a blokuje uživatele v jeho odeslání, pokud jsou některé vstupy neplatné. Navíc automaticky generuje tlačítko pro odeslání.
typ="formulář"
formulář-třída="vnější kontejner"
submit-label="Registrovat"
@Předložit="Registrovat">
Spojením všeho dohromady získáte kompletní formu, jak je znázorněno na obrázku níže.
Generování formuláře pomocí schématu FormKit
Se schématy JSON je možné generovat formuláře podobné vstupním prvkům, jak bylo provedeno dříve. Chcete-li vygenerovat formulář, jednoduše zadejte své pole schématu komponentu pomocí schéma podpěra.
Pole schémat
konst schéma = [
{
$formkit: "e-mailem",
název: "e-mailem",
označení: "Emailová adresa",
zástupný symbol: "Vložte svůj e-mail",
Validace: "vyžadováno|e-mail",
},
{
$formkit: 'Heslo',
název: 'Heslo',
označení: 'Heslo',
Validace: 'požadovaná|délka: 5,16'
},
{
$formkit: 'Heslo',
název: 'potvrzení hesla',
označení: 'Potvrďte heslo',
Validace: 'požadováno|potvrdit',
validationLabel: 'Potvrzení hesla',
},
];Poté je předán prop v komponentě FormKit.
"formulář" formulář-třída="vnější kontejner"submitlabel="Přihlásit se">
<FormKitSchema:schéma="schéma" />
FormKit> Toto je konečný generovaný výstup:
Rychlejší přístup k vytváření formulářů ve Vue3
FormKit poskytuje rychlejší a efektivnější přístup k vytváření formulářů ve Vue 3. S FormKit můžete eliminovat potřebu vytvářet standardní šablony od začátku, což vám umožní soustředit se na implementaci logiky přímo. Tento zjednodušený proces nejen šetří čas, ale také zvyšuje produktivitu.
FormKit navíc umožňuje dynamické vykreslování formulářů prostřednictvím podmíněného vykreslování. Tato funkce umožňuje vytvářet interaktivní a uživatelsky přívětivá rozhraní pro uživatele, kde se prvky formuláře zobrazují nebo skrývají na základě určitých podmínek.