Űrlapokra van szüksége a következő projektjéhez? Így hozhat létre űrlapokat a FormKit segítségével.
Az űrlapok átjárót jelentenek a felhasználók számára, hogy kapcsolatba lépjenek az alkalmazással, és alapvető adatokat biztosítsanak az olyan feladatokhoz, mint a fiók létrehozása, a fizetések feldolgozása és az információgyűjtés. A formák összeállítása azonban ijesztő feladat lehet, mivel kiterjedt, időigényes és hibára hajlamos feldolgozási kódot igényel.
A FormKit megoldást kínál azáltal, hogy előre beépített komponenseket biztosít, amelyek szükségtelenné teszik a rendszerkódot. Így kell használni.
Mi az a FormKit?
FormKit egy nyílt forráskódú űrlapépítő keretrendszer, amelyet kifejezetten a Vue 3-hoz fejlesztettek ki, és a kiváló minőségű, gyártásra kész űrlapok létrehozásának folyamatát hivatott leegyszerűsíteni. Ez a népszerű továbbfejlesztett változata Vue Formulate könyvtárat, és több mint 25 testreszabható és hozzáférhető beviteli lehetőséget biztosít, valamint egy előre meghatározott érvényesítési szabálykészletet.
A FormKit lehetőséget kínál arra is, hogy űrlapokat generáljon JSON-kompatibilis dinamikus sémákon keresztül, megkönnyítve ezzel az összetett űrlapok gyors létrehozását. Ezenkívül a FormKit aktív közösséggel rendelkezik a Discordon, amely támogatást nyújt és elősegíti a felhasználók közötti együttműködést. Átfogó szolgáltatásaival és támogatási rendszerével a FormKit megbízható és hatékony eszköz a Vue 3 projektjeikhez űrlapokat készíteni kívánó fejlesztők számára.
A FormKit Framework jellemzői
Az űrlapépítő funkciók széles választékát találja meg a FormKitben.
1. Egykomponensű API
A FormKit egyik érdekes tulajdonsága az egykomponensű API: összetevő. Hozzáférést biztosít minden bemeneti típushoz. Ez közvetlen és egyszerű hozzáférést biztosít az űrlapelemek létrehozásához, ahelyett, hogy natív HTML-elemeket kellene használnia.
2. Előre meghatározott érvényesítési szabályok
A Formkit leegyszerűsíti az űrlapellenőrzések kezelését lehetővé teszi, hogy egy szabálykészletet közvetlenül alkalmazzon a bemenetekre az érvényesítési javaslat segítségével. Több mint 30 különböző előre meghatározott szabályt tartalmaz, amelyeket ízlése szerint választhat. Alternatív megoldásként létrehozhat globálisan vagy kifejezetten az összetett korlátozások bemenetén regisztrált egyéni szabályokat.
3. Testreszabható stílusbeállítások
A FormKit nem tartalmaz alapértelmezett stílusbeállításokat, de van egy opcionális alaptémája - a Genesis. Ezt külön kell telepítenie.
Az első telepítéssel a @formkit/themes csomag.
npm telepítés @formkit/themesEzután importálja a projektbe
import"@formkit/themes/genesis"Egyéb stíluslehetőségek közé tartozik az egyéni osztályok használata, amelyek lehetővé teszik saját stílusok és osztályok alkalmazását a FormKit által biztosított jelölésekre.
4. Sémagenerálás
A FormKit sémagenerálása kiváló funkció, amely leegyszerűsíti az űrlapmezők létrehozásának folyamatát. A séma objektumok tömbje, ahol minden objektum egy HTML-elemet képvisel csak JSON formátumban képviselheti.
A sématömb FormKit csomópontobjektumokból áll, amelyek különböző elemeknek, például HTML-elemeknek, komponenseknek vagy szöveges csomópontoknak felelnek meg. Ezek az objektumok már létező Vue-változókra hivatkozhatnak, és bármilyen jelölést vagy komponenst megjeleníthetnek szerkeszthető attribútumokkal és kellékekkel, így hatékony módszert jelentenek az űrlapok felépítésére és testreszabására. Alapértelmezés szerint nincs globálisan regisztrálva, ezért importálnia kell.
import { FormKitSchema } tól től"@formkit/vue"A FormKit integrálása a Vue3-ba
A FormKit Vue 3 alkalmazásban való használatának megkezdéséhez először telepítse a projekten belül. Ez a rész egy demót tartalmaz egy új vue alkalmazás használatával a semmiből.
A FormKit használatának előfeltételei
Mielőtt elkezdené, győződjön meg arról, hogy rendelkezik az alábbiakkal:
- A Vue és a JavaScript alapvető ismerete
- Node.js és npm beállítása a számítógépen
Ha készen áll a sebességre, készen áll az első alkalmazás létrehozására.
Új Vue alkalmazás létrehozása
Először futtassa az alábbi parancsot a terminálon egy új Vue alkalmazás inicializálásához:
npm init vue@legújabbEzután kövesse a promptban megadott lépéseket ízlésének megfelelően. A projekt teljes telepítése után folytassa a FormKit telepítésével az alkalmazásban.
npm telepítés @formkit/vue Következő, a main.js fájlt.
import { Alkalmazás létrehozása } tól től'vue'
import'./style.css'
import App tól től'./App.vue'
// Formkit beállítása
import { plugin, defaultConfig } tól től"@formkit/vue";
// Importálja a Genesis témát
import"@formkit/themes/genesis";
createApp (App).use(csatlakoztat, defaultConfig).mount("#app")A csomag @formkit/vue egy Vue beépülő modullal és egy alapértelmezetten konfigurált beállítással érkezik a zökkenőmentes telepítéshez. Miután befejezte a beállítást, készen áll a beépítésre összetevőt a Vue 3 alkalmazásba. Ezenkívül hozzáadhatja a Genesis témák beállítását is, a korábban leírtak szerint.
Újrafelhasználható űrlapok létrehozása a FormKit segítségével
Ez a rész bemutatja, hogyan használhatja fel a FormKit-et egy funkcionális és testreszabható űrlap létrehozására egy egyszerű regisztrációs űrlap létrehozásával.
A jobb kódstruktúra érdekében érdemes külön fájlt létrehozni ehhez az összetevőhöz: RegisztrációsForm.vue
Először is definiálja a bemeneti elemet ezzel a formátummal
típus="szöveg"
címke="Keresztnév"
helyőrző="Abiola"
érvényesítés="szükséges|hossz: 4"
Segítség = "Írjon be legalább 4 karaktert"
<FormKit/>Ez a kód bemutatja, hogyan használhatja a FormKit-et szövegbevitel létrehozására egy adott típusú szöveg használatával. Az érvényesítési támaszték a szabályokat a "|" jellel választja el. A súgójavaslat egy kis szöveget helyez el közvetlenül a beviteli elem alatt.
Ezenkívül felfedezhet más beviteli típusokat is, például az alábbiakat.
típus="szöveg"
címke="Vezetéknév"
helyőrző="Eszter"
érvényesítés="szükséges|hossz: 4"
Segítség = "Írjon be legalább 4 karaktert"
/>
típus="email"
címke="Email cím"
prefix-icon="email"
érvényesítés="kötelező|e-mail"
helyőrző="[email protected]"
/>
típus="dátum"
címke="Születési dátum"
Segítség="Adja meg születésnapját a következő formátumban: NN/MM/YYYY"
érvényesítés="kívánt"
/> v-modell="érték"
típus="rádió"
címke="Nem"
:options="['Férfi nő']"
Segítség="Válaszd ki a nemed"
/>
típus="fájl"
címke="Töltsd fel a képed"
elfogad =".jpg,.png,.jpeg"
Segítség="Válassza ki képét"
/>
A kód megmutatja, hogyan kell néhány egyéb bemeneti elemet használni, és hogyan kell beállítani az érvényesítési szabályokat.
A FormKit tartalmaz egy "form" nevű típustámaszt, amely az összes bemeneti elemet becsomagolja. Figyeli az űrlap érvényesítési állapotát, és megakadályozza, hogy a felhasználók elküldjék, ha bármely bevitel érvénytelen. Ezenkívül automatikusan generál egy küldés gombot.
típus="forma"
forma-osztály="külső konténer"
submit-label="Regisztráció"
@Beküldés="Regisztráció">
Mindent összevonva a teljes űrlapot kapja, az alábbi képen látható módon.
Űrlapgenerálás a FormKit sémájával
A JSON-sémákkal lehetőség van a bemeneti elemekhez hasonló űrlapok generálására, amint azt korábban is tettük. Az űrlap létrehozásához egyszerűen adja meg a sématömböt a komponens felhasználásával séma támaszt.
A sématömb
const séma = [
{
$formkit: "email",
név: "email",
címke: "Email cím",
helykitöltő: "Írd be az email címed",
érvényesítés: "kötelező|e-mail",
},
{
$formkit: 'Jelszó',
név: 'Jelszó',
címke: 'Jelszó',
érvényesítés: 'szükséges|hossz: 5,16'
},
{
$formkit: 'Jelszó',
név: 'jelszó megerősítése',
címke: 'Jelszó megerősítése',
érvényesítés: 'szükséges|megerősíteni',
validationLabel: 'Jelszó megerősítése',
},
];Ezt követően a FormKit komponensben lévő kellékhez kerül.
"forma" forma-osztály="külső konténer"submitlabel="Belépés">
<FormKitSchema:séma="séma" />
FormKit> Ez a végső generált kimenet:
A Vue3 formák felépítésének gyorsabb megközelítése
A FormKit gyorsabb és hatékonyabb megközelítést biztosít az űrlapok felépítéséhez a Vue 3-ban. A FormKit segítségével kiküszöbölheti a sablonok sablonok létrehozásának szükségességét a semmiből, lehetővé téve, hogy a logika közvetlen megvalósítására összpontosítson. Ez az egyszerűsített folyamat nemcsak időt takarít meg, hanem növeli a termelékenységet is.
Ezenkívül a FormKit lehetővé teszi az űrlapok dinamikus megjelenítését feltételes megjelenítésen keresztül. Ezzel a funkcióval interaktív és felhasználóbarát felületeket hozhat létre a felhasználók számára, ahol az űrlapelemek bizonyos feltételek alapján megjelennek vagy elrejthetők.