Reikia formų kitam projektui? Štai kaip sukurti formas naudojant FormKit.
Formos yra vartai, kuriais vartotojai gali naudotis jūsų programa ir pateikti esminius duomenis, reikalingus tokioms užduotims kaip paskyros kūrimas, mokėjimų apdorojimas ir informacijos rinkimas. Tačiau formų kūrimas gali būti bauginanti užduotis, reikalaujanti plataus pagrindinio kodo, kuris užima daug laiko ir gali sukelti klaidų.
„FormKit“ siūlo sprendimą pateikdama iš anksto sukurtus komponentus, kurie pašalina pagrindinio kodo poreikį. Štai kaip juo naudotis.
Kas yra FormKit?
FormKit yra atvirojo kodo formų kūrimo sistema, sukurta specialiai Vue 3, skirta supaprastinti aukštos kokybės, gamybai paruoštų formų kūrimo procesą. Tai patobulinta populiariojo versija Vue formulė biblioteka ir suteikia daugiau nei 25 tinkinamų ir pasiekiamų įvesties parinkčių bei iš anksto nustatytų patvirtinimo taisyklių rinkinį.
„FormKit“ taip pat suteikia galimybę generuoti formas naudojant su JSON suderinamas dinamines schemas, todėl lengva greitai sukurti sudėtingas formas. Be to, „FormKit“ turi aktyvią „Discord“ bendruomenę, teikiančią paramą ir skatinančią vartotojų bendradarbiavimą. Turėdamas išsamias funkcijas ir palaikymo sistemą, „FormKit“ yra patikimas ir efektyvus įrankis kūrėjams, norintiems kurti formas savo „Vue 3“ projektams.
„FormKit Framework“ ypatybės
„FormKit“ rasite platų formų kūrimo funkcijų pasirinkimą.
1. Vieno komponento API
Viena iš įdomių „FormKit“ savybių yra jo vieno komponento API: komponentas. Tai suteikia prieigą prie visų įvesties tipų. Tai suteikia tiesioginę ir lengvą prieigą prie formos elementų kūrimo, o ne naudoti vietinius HTML elementus.
2. Iš anksto nustatytos patvirtinimo taisyklės
Formkit supaprastina formų patvirtinimo tvarkymą leidžiant tiesiogiai taikyti taisyklių rinkinį įvestims naudojant patvirtinimo rekvizitus. Jame yra daugiau nei 30 skirtingų iš anksto nustatytų taisyklių, kurias galite pasirinkti pagal savo pageidavimus. Arba galite sukurti tinkintas taisykles, užregistruotas visame pasaulyje arba specialiai įvesties sudėtingiems apribojimams.
3. Pritaikomos stiliaus parinktys
„FormKit“ nėra numatytųjų stiliaus parinkčių, tačiau turi pasirenkamą bazinę temą – „Genesis“. Tai turite įdiegti atskirai.
Pirmiausia įdiegę @formkit/themes paketą.
npm diegimas @formkit/themesTada importuokite jį į savo projektą
importuoti„@formkit/themes/genesis“Kitos stiliaus parinktys apima pasirinktinių klasių naudojimą, leidžiančią pritaikyti savo stilius ir klases FormKit pateiktam žymėjimui.
4. Schemos generavimas
„FormKit“ schemų generavimas yra puiki funkcija, supaprastinanti formos laukų kūrimo procesą. Schema yra objektų masyvas, kuriame kiekvienas objektas reiškia HTML elementą ir galite atstovauti tik JSON formatu.
Schemos masyvą sudaro FormKit mazgo objektai, atitinkantys įvairius elementus, tokius kaip HTML elementai, komponentai arba teksto mazgai. Šie objektai gali nurodyti jau esamus Vue kintamuosius ir pateikti bet kokį žymėjimą ar komponentą su redaguojamais atributais ir rekvizitais, todėl tai yra efektyvus formų kūrimo ir tinkinimo būdas. Pagal numatytuosius nustatymus jis nėra registruotas visame pasaulyje, todėl turite jį importuoti.
importuoti { FormKitSchema } iš„@formkit/vue“„FormKit“ integravimas į „Vue3“.
Norėdami pradėti naudoti FormKit Vue 3 programoje, pirmiausia įdiekite jį savo projekte. Šiame skyriuje bus demonstracinė versija naudojant naują vue programą nuo nulio.
Būtinos sąlygos naudoti FormKit
Prieš pradėdami įsitikinkite, kad turite šiuos dalykus:
- Pagrindinis Vue ir JavaScript supratimas
- Node.js ir npm nustatyti jūsų kompiuteryje
Kai tik įsibėgėsite, būsite pasirengę sukurti pirmąją programą.
Naujos „Vue“ programos kūrimas
Pirmiausia terminale paleiskite toliau pateiktą komandą, kad inicijuotų naują „Vue“ programą:
npm init vue@naujausiaTada atlikite ragelyje nurodytus veiksmus pagal savo pageidavimus. Kai projektas bus visiškai įdiegtas, pereikite prie FormKit diegimo programoje.
npm diegimas @formkit/vue Toliau, į main.js failą.
importuoti { sukurti programą } iš'vue'
importuoti'./style.css'
importuoti Programėlė iš„./App.vue“
// Formkit sąranka
importuoti { papildinys, numatytoji konfigūracija } iš„@formkit/vue“;
// Importuokite „Genesis“ temą
importuoti„@formkit/themes/genesis“;
CreateApp (App).use(Prijunkite, defaultConfig).mount(„#programa“)Paketas @formkit/vue komplektuojamas su „Vue“ papildiniu ir numatytuoju konfigūruotu sklandžiu diegimu. Kai baigsite sąranką, būsite pasiruošę įtraukti komponentą į „Vue 3“ programą. Taip pat galite pridėti „Genesis“ temų sąranką, kaip nurodyta anksčiau.
Daugkartinio naudojimo formų kūrimas naudojant „FormKit“.
Šiame skyriuje parodyta, kaip naudoti FormKit kuriant funkcionalią ir pritaikomą formą sukuriant paprastą registracijos formą.
Norint sukurti geresnę kodo struktūrą, verta sukurti atskirą šio komponento failą: RegistrationForm.vue
Pirmiausia nustatykite įvesties elementą naudodami šį formatą
tipo="tekstas"
etiketė ="Pirmas vardas"
vietos rezervuaras="Abiola"
patvirtinimas ="reikalingas|ilgis: 4"
padėti = "Įveskite mažiausiai 4 simbolius"
<FormKit/>Šis kodas parodo, kaip naudoti „FormKit“ sugeneruojant teksto įvestį naudojant tam tikro tipo tekstą. Patvirtinimo atrama taisykles atskiria naudojant vamzdžio simbolį „|“. Pagalbos pasiūlymas pateikia nedidelį tekstą tiesiai po įvesties elementu.
Be to, galite tyrinėti kitus įvesties tipus, pvz., toliau nurodytus.
tipo="tekstas"
etiketė ="Pavardė"
vietos rezervuaras="Estera"
patvirtinimas ="reikalingas|ilgis: 4"
padėti = "Įveskite mažiausiai 4 simbolius"
/>
tipo="el. paštas"
etiketė ="Elektroninio pašto adresas"
prefix-icon="el. paštas"
patvirtinimas ="privalomas|el. paštas"
vietos rezervuaras="[email protected]"
/>
tipo="data"
etiketė ="Gimimo data"
padėti="Įveskite savo gimtadienį formatu - DD/MM/YYYY"
patvirtinimas ="reikalinga"
/> v-modelis ="vertė"
tipo="radijas"
etiketė ="Lytis"
:parinktys="['Vyras Moteris']"
padėti="Pasirinkite savo lytį"
/>
tipo="failas"
etiketė =„Įkelk savo nuotrauką“
priimti =".jpg,.png,.jpeg"
padėti="Pasirinkite savo vaizdą"
/>
Kodas parodo, kaip naudoti kai kuriuos kitus įvesties elementus ir nustatyti patvirtinimo taisykles.
„FormKit“ apima tipą, vadinamą „forma“, kuris apvynioja visus įvesties elementus. Ji stebi formos patvirtinimo būseną ir neleidžia vartotojams jos pateikti, jei įvestis neteisinga. Be to, automatiškai sugeneruojamas pateikimo mygtukas.
tipo="forma"
forma-klasė="išorinis konteineris"
Pateikti etiketę="Registruotis"
@Pateikti="Registruotis">
Viską sujungus, gaunama visa forma, kaip parodyta paveikslėlyje žemiau.
Formų generavimas naudojant FormKit schemą
Naudojant JSON schemas galima generuoti formas, panašias į įvesties elementus, kaip buvo padaryta anksčiau. Norėdami sugeneruoti formą, tiesiog pateikite savo schemos masyvą komponentas, naudojant schema prop.
Schemų masyvas
konst schema = [
{
$formkit: "el. paštas",
vardas: "el. paštas",
etiketė: "Elektroninio pašto adresas",
vietos rezervuotojas: "Įrašykite savo el. paštą",
patvirtinimas: "privalomas|el. paštas",
},
{
$formkit: 'Slaptažodis',
vardas: 'Slaptažodis',
etiketė: 'Slaptažodis',
patvirtinimas: 'reikalingas|ilgis: 5,16'
},
{
$formkit: 'Slaptažodis',
vardas: 'Slaptažodis patvirtintas',
etiketė: 'Patvirtinti slaptažodį',
patvirtinimas: 'reikia|patvirtinti',
patvirtinimo etiketė: 'slaptažodžio patvirtinimas',
},
];Tada jis perduodamas rekvizitui FormKit komponente.
"forma" forma-klasė="išorinis konteineris"submitlabel="Prisijungti">
<FormKitSchema:schema="schema" />
FormKit> Tai yra galutinė sugeneruota išvestis:
Greitesnis požiūris į formų kūrimą Vue3
„FormKit“ suteikia greitesnį ir efektyvesnį požiūrį į formų kūrimą „Vue 3“. Naudodami „FormKit“ galite pašalinti poreikį kurti šablonų šablonus nuo nulio, todėl galite sutelkti dėmesį į tiesioginį logikos įgyvendinimą. Šis supaprastintas procesas ne tik taupo laiką, bet ir padidina produktyvumą.
Be to, FormKit leidžia dinamiškai atvaizduoti formas naudojant sąlyginį atvaizdavimą. Ši funkcija leidžia sukurti interaktyvias ir patogias naudotojų sąsajas, kuriose formos elementai rodomi arba slepiasi atsižvelgiant į tam tikras sąlygas.
