Tarvitsetko lomakkeita seuraavaan projektiisi? Näin voit luoda lomakkeita FormKitillä.
Lomakkeet ovat portti, jonka avulla käyttäjät voivat olla yhteydessä sovellukseesi ja tarjota tärkeitä tietoja tehtäviin, kuten tilin luomiseen, maksujen käsittelyyn ja tietojen keräämiseen. Mutta muotojen rakentaminen voi olla pelottava tehtävä, joka vaatii laajaa kaavakoodia, joka on aikaa vievä ja virhealtis
FormKit tarjoaa ratkaisun tarjoamalla valmiiksi rakennettuja komponentteja, jotka poistavat vakiokoodin tarpeen. Näin käytät sitä.
Mikä on FormKit?
FormKit on avoimen lähdekoodin lomakkeenrakennuskehys, joka on kehitetty erityisesti Vue 3:lle ja joka on suunniteltu yksinkertaistamaan korkealaatuisten, tuotantovalmiiden lomakkeiden luomista. Se on paranneltu versio suositusta Vue Formulate kirjasto ja tarjoaa yli 25 muokattavissa olevaa ja käytettävissä olevaa syöttövaihtoehtoa sekä ennalta määritellyt vahvistussäännöt.
FormKit tarjoaa myös mahdollisuuden luoda lomakkeita JSON-yhteensopivien dynaamisten skeemojen avulla, mikä tekee monimutkaisten lomakkeiden nopean luomisen helpoksi. Lisäksi FormKitillä on aktiivinen Discord-yhteisö, joka tarjoaa tukea ja edistää käyttäjien välistä yhteistyötä. Kattavien ominaisuuksiensa ja tukijärjestelmänsä ansiosta FormKit on luotettava ja tehokas työkalu kehittäjille, jotka haluavat rakentaa lomakkeita Vue 3 -projekteihinsa.
FormKit Frameworkin ominaisuudet
Löydät laajan valikoiman lomakkeenrakennusominaisuuksia FormKitistä.
1. Single Component API
Yksi FormKitin mielenkiintoisista ominaisuuksista on sen yksikomponenttinen API: komponentti. Se antaa sinulle pääsyn kaikkiin tulotyyppeihin. Tämä antaa suoran ja helpon pääsyn lomakeelementtien luomiseen sen sijaan, että joutuisi käyttämään alkuperäisiä HTML-elementtejä.
2. Ennalta määritellyt validointisäännöt
Formkit yksinkertaistaa lomakkeiden tarkistusten käsittelyä sallimalla sinun soveltaa sääntöjoukkoa suoraan syötteisiin validointiehdotuksen avulla. Siinä on yli 30 erilaista ennalta määritettyä sääntöä, jotka voit valita mieltymystesi mukaan. Vaihtoehtoisesti voit luoda mukautettuja sääntöjä, jotka on rekisteröity maailmanlaajuisesti tai erityisesti syötteellä monimutkaisia rajoituksia varten.
3. Muokattavat tyylivaihtoehdot
FormKit ei sisällä oletusmuotoiluasetuksia, mutta siinä on valinnainen perusteema - Genesis. Sinun on asennettava tämä erikseen.
Asentamalla ensin @formkit/teemat paketti.
npm asennus @formkit/themesTuo se sitten projektiisi
tuonti'@formkit/themes/genesis'Muita tyylivaihtoehtoja ovat mukautettujen luokkien käyttö, jonka avulla voit käyttää omia tyylejäsi ja luokkiasi FormKitin tarjoamiin merkintöihin.
4. Schema Generation
FormKitin skeeman luonti on erinomainen ominaisuus, joka yksinkertaistaa lomakekenttien luomista. Kaava on joukko objekteja, joista jokainen edustaa HTML-elementtiä ja voit edustaa vain JSON-muodossa.
Kaavataulukko koostuu FormKit-solmuobjekteista, jotka vastaavat erilaisia elementtejä, kuten HTML-elementtejä, komponentteja tai tekstisolmuja. Nämä objektit voivat viitata olemassa oleviin Vue-muuttujiin ja renderöidä minkä tahansa merkinnän tai komponentin muokattavissa olevilla attribuuteilla ja rekvisiitillä, mikä tekee siitä tehokkaan tavan luoda ja mukauttaa lomakkeita. Oletuksena sitä ei ole rekisteröity maailmanlaajuisesti, joten sinun on tuotava se.
tuonti { FormKitSchema } alkaen'@formkit/vue'FormKitin integrointi Vue3:een
Aloittaaksesi FormKitin käytön Vue 3 -sovelluksessa, asenna se ensin projektiisi. Tämä osio sisältää demon, jossa käytetään uutta vue-sovellusta tyhjästä.
FormKitin käytön edellytykset
Ennen kuin aloitat, varmista, että sinulla on seuraavat asiat:
- Vuen ja JavaScriptin perusteet
- Node.js ja npm määritetty tietokoneellesi
Kun olet valmis, olet valmis luomaan ensimmäisen sovelluksesi.
Uuden Vue-sovelluksen luominen
Suorita ensin alla oleva komento terminaalissasi uuden Vue-sovelluksen alustamiseksi:
npm init vue@ViimeisinNoudata sitten kehotteessa määritettyjä vaiheita mieltymystesi mukaan. Kun projekti on asennettu kokonaan, jatka FormKitin asentamista sovellukseen.
npm asennus @formkit/vue Seuraavaksi vuonna main.js tiedosto.
tuonti { luo sovellus } alkaen'vue'
tuonti'./style.css'
tuonti Sovellus alkaen'./App.vue'
// Asenna Formkit
tuonti { plugin, defaultConfig } alkaen"@formkit/vue";
// Tuo Genesis-teema
tuonti"@formkit/themes/genesis";
createApp (App).use(kytkeä, defaultConfig).mount('#sovellus')Paketti @formkit/vue mukana tulee Vue-laajennus ja oletusmääritetty asennus saumatonta asennusta varten. Kun olet suorittanut asennuksen, olet valmis sisällyttämään komponenttia Vue 3 -sovellukseesi. Voit myös lisätä Genesis-teemojen asetukset aiemmin kerrotulla tavalla.
Uudelleenkäytettävien lomakkeiden luominen FormKitillä
Tämä osio havainnollistaa, kuinka FormKitiä hyödynnetään toimivan ja muokattavissa olevan lomakkeen rakentamisessa luomalla yksinkertainen rekisteröintilomake.
Paremman koodirakenteen saamiseksi on hyvä luoda erillinen tiedosto tälle komponentille: RegistrationForm.vue
Ensinnäkin määritä syöttöelementti käyttämällä tätä muotoa
tyyppi="teksti"
etiketti="Etunimi"
paikkamerkki="Abiola"
validointi ="pakollinen|pituus: 4"
auta = "Anna vähintään 4 merkkiä"
<FormKit/>Tämä koodi näyttää, kuinka FormKitin avulla luodaan tekstisyöte tietyntyyppistä tekstiä käyttäen. Validointiehdotus erottaa säännöt käyttämällä putkisymbolia "|". Apupalkki sijoittaa pienen tekstin syöttöelementin alle.
Voit myös tutkia muita syöttötyyppejä, kuten alla.
tyyppi="teksti"
etiketti="Sukunimi"
paikkamerkki="Esther"
validointi ="pakollinen|pituus: 4"
auta = "Anna vähintään 4 merkkiä"
/>
tyyppi="sähköposti"
etiketti="Sähköpostiosoite"
etuliite-kuvake="sähköposti"
validointi ="pakollinen|sähköposti"
paikkamerkki="[email protected]"
/>
tyyppi="Päivämäärä"
etiketti="Syntymäaika"
auta="Anna syntymäpäiväsi muodossa PP/KK/VVVV"
validointi ="edellytetään"
/> v-malli ="arvo"
tyyppi="radio"
etiketti="Sukupuoli"
:optiot="['Mies Nainen']"
auta="Valitse sukupuolesi"
/>
tyyppi="tiedosto"
etiketti="Lähetä valokuvasi"
hyväksy =".jpg,.png,.jpeg"
auta="Valitse kuvasi"
/>
Koodi näyttää kuinka käyttää joitain muita syöteelementtejä ja asettaa validointisäännöt.
FormKit sisältää "form"-nimisen tyypin, joka kääri kaikki syöteelementit. Se valvoo lomakkeen vahvistustilaa ja estää käyttäjiä lähettämästä sitä, jos syötteet ovat virheellisiä. Lisäksi se luo automaattisesti lähetyspainikkeen.
tyyppi="lomake"
muoto-luokkaa="ulkosäiliö"
lähetä-etiketti="Rekisteröidy"
@Lähetä="Rekisteröidy">
Yhdistämällä kaikki yhteen saat täydellisen lomakkeen, kuten alla olevassa kuvassa näkyy.
Lomakkeiden luominen FormKitin skeemalla
JSON-skeemojen avulla on mahdollista luoda syöteelementtien kaltaisia lomakkeita, kuten aiemmin tehtiin. Luodaksesi lomakkeen, anna skeemamatriisi komponenttia käyttämällä kaava prop.
Scheme Array
konst skeema = [
{
$formkit: "sähköposti",
nimi: "sähköposti",
etiketti: "Sähköpostiosoite",
paikanpitäjä: "Syötä sähköpostiosoitteesi",
vahvistus: "pakollinen|sähköposti",
},
{
$formkit: 'Salasana',
nimi: 'Salasana',
etiketti: 'Salasana',
vahvistus: 'pakollinen|pituus: 5,16'
},
{
$formkit: 'Salasana',
nimi: 'password_confirm',
etiketti: 'Vahvista salasana',
vahvistus: 'pakollinen|vahvista',
validationLabel: 'salasanan vahvistus',
},
];Se välitetään sitten FormKit-komponentin potkuriin.
"lomake" muoto-luokkaa="ulkosäiliö"lähetysnimi="Kirjaudu sisään">
<FormKitSchema:skeema="skeema" />
FormKit> Tämä on lopullinen luotu tulos:
Nopeampi lähestymistapa lomakkeiden rakentamiseen Vue3:ssa
FormKit tarjoaa nopeamman ja tehokkaamman lähestymistavan lomakkeiden rakentamiseen Vue 3:ssa. FormKitin avulla voit poistaa tarpeen luoda vakiomalleja tyhjästä, jolloin voit keskittyä logiikan toteuttamiseen suoraan. Tämä virtaviivainen prosessi ei ainoastaan säästä aikaa, vaan myös lisää tuottavuutta.
Lisäksi FormKit mahdollistaa lomakkeiden dynaamisen hahmontamisen ehdollisen renderöinnillä. Tämän ominaisuuden avulla voit luoda käyttäjille interaktiivisia ja käyttäjäystävällisiä käyttöliittymiä, joissa lomakeelementit näkyvät tai piiloutuvat tiettyjen ehtojen mukaan.