Потребни су вам обрасци за ваш следећи пројекат? Ево како да креирате обрасце помоћу ФормКит-а.
Обрасци су пролаз за кориснике да се ангажују са вашом апликацијом и да обезбеде основне податке за задатке као што су креирање налога, обрада плаћања и прикупљање информација. Али изградња образаца може бити застрашујући задатак, захтевајући опсежан шаблонски код који одузима много времена и подложан грешкама
ФормКит нуди решење обезбеђивањем унапред изграђених компоненти које елиминишу потребу за шаблонским кодом. Ево како да га користите.
Шта је ФормКит?
ФормКит је оквир за изградњу образаца отвореног кода развијен посебно за Вуе 3, дизајниран да поједностави процес креирања висококвалитетних форми спремних за производњу. То је побољшана верзија популарног Вуе Формулате библиотеку и пружа преко 25 прилагодљивих и приступачних опција уноса, заједно са унапред дефинисаним скупом правила валидације.
ФормКит такође нуди могућност генерисања образаца преко ЈСОН компатибилних динамичких шема, што олакшава брзо креирање сложених образаца. Поред тога, ФормКит има активну заједницу на Дисцорд-у, пружајући подршку и подстичући сарадњу међу корисницима. Са својим свеобухватним функцијама и системом подршке, ФормКит је поуздан и ефикасан алат за програмере који желе да направе обрасце за своје Вуе 3 пројекте.
Карактеристике оквира ФормКит
У ФормКит-у ћете пронаћи широк избор функција за прављење образаца.
1. Једнокомпонентни АПИ
Једна од занимљивих карактеристика ФормКит-а је његов једнокомпонентни АПИ: саставни део. Омогућава вам приступ свим врстама уноса. Ово даје директан и лак приступ креирању елемената обрасца уместо да се користе изворни ХТМЛ елементи.
2. Унапред дефинисана правила валидације
Формкит поједностављује руковање валидацијом обрасца омогућавајући вам да директно примените скуп правила на улазе користећи валидациони проп. Има преко 30 различитих унапред дефинисаних правила која можете изабрати у зависности од ваших жеља. Алтернативно, можете креирати прилагођена правила регистрована глобално или посебно на улазу за сложена ограничења.
3. Прилагодљиве опције стила
ФормКит долази без подразумеваних опција стила, али има опциону основну тему - Генесис. Ово морате да инсталирате одвојено.
Прво инсталирањем @формкит/тхемес пакет.
нпм инсталл @формкит/themesЗатим га увезите у свој пројекат
увоз'@формкит/тхемес/генесис'Остале опције стилизовања укључују употребу прилагођених класа које вам омогућавају да примените сопствене стилове и класе на ФормКит-ове ознаке.
4. Генерисање шеме
ФормКит-ово генерисање шема је одлична карактеристика која поједностављује процес креирања поља обрасца. Шема је низ објеката, при чему сваки објекат представља ХТМЛ елемент и можете представљати само у ЈСОН формату.
Низ шеме се састоји од ФормКит чворних објеката који одговарају различитим елементима, као што су ХТМЛ елементи, компоненте или текстуални чворови. Ови објекти могу референцирати већ постојеће Вуе променљиве и приказати било коју ознаку или компоненту са атрибутима и реквизитима који се могу уређивати, што га чини ефикасним методом за прављење и прилагођавање образаца. Подразумевано, није регистрован глобално, тако да морате да га увезете.
увоз { ФормКитСцхема } из'@формкит/вуе'Интеграција ФормКит-а у Вуе3
Да бисте почели да користите ФормКит у Вуе 3 апликацији, прво га инсталирајте у оквиру свог пројекта. Овај одељак ће укључивати демо коришћење нове вуе апликације од нуле.
Предуслови за коришћење ФормКит-а
Пре него што почнете, уверите се да имате следеће:
- Фундаментално разумевање Вуе-а и ЈаваСцрипт-а
- Ноде.јс и нпм постављени на вашем рачунару
Када завршите са брзином, спремни сте да направите своју прву апликацију.
Креирање нове Вуе апликације
Прво, покрените наредбу испод у свом терминалу да бисте иницијализовали нову Вуе апликацију:
нпм инит вуе@најновијеЗатим пратите кораке наведене у упиту према вашим жељама. Након што је пројекат у потпуности инсталиран, наставите да инсталирате ФормКит у апликацију.
нпм инсталл @формкит/vue Следеће, у маин.јс фајл.
увоз { цреатеАпп } из'вуе'
увоз'./стиле.цсс'
увоз Апликација из'./Апп.вуе'
// Сетуп Формкит
увоз { плугин, дефаултЦонфиг } из„@формкит/вуе“;
// Увези тему Генесис
увоз„@формкит/тхемес/генесис“;
цреатеАпп (Апп).усе(повезати, дефаултЦонфиг).моунт('#апликација')Пакет @формкит/вуе долази у пакету са Вуе додатком и подразумевано конфигурисаним подешавањем за беспрекорну инсталацију. Када завршите са подешавањем, спремни сте за уградњу компоненту у вашу Вуе 3 апликацију. Такође, можете додати подешавања за Генесис теме као што је раније наведено.
Креирање образаца за вишекратну употребу помоћу ФормКит-а
Овај одељак показује како да користите ФормКит у изградњи функционалног и прилагодљивог обрасца креирањем једноставног обрасца за регистрацију.
За бољу структуру кода, добро је направити засебну датотеку за ову компоненту: РегистратионФорм.вуе
Прво, дефинишите улазни елемент користећи овај формат
тип="текст"
лабел="Име"
плацехолдер="Абиола"
валидатион="потребна|дужина: 4"
помоћ = „Унесите најмање 4 знака“
<ФормКит/>Овај код показује како да користите ФормКит за генерисање уноса текста користећи врсту текста. Провера валидације раздваја правила помоћу симбола цеви "|". Помоћни проп позиционира мали текст одмах испод елемента за унос.
Такође, можете истражити друге типове уноса попут оних испод.
тип="текст"
лабел="Презиме"
плацехолдер="Естер"
валидатион="потребна|дужина: 4"
помоћ = „Унесите најмање 4 знака“
/>
тип="е-пошта"
лабел="Адреса Е-поште"
префикс-икона="е-пошта"
валидатион="обавезна|е-пошта"
плацехолдер="тест@гмаил.цом"
/>
тип="датум"
лабел="Датум рођења"
помоћ=„Унесите свој рођендан у формату- ДД/ММ/ГГГГ“
валидатион="потребан"
/> в-модел="вредност"
тип="радио"
лабел="пол"
:оптионс="['Мушко женски']"
помоћ="Изаберите пол"
/>
тип="фајл"
лабел=„Отпреми своју фотографију“
аццепт=„.јпг,.пнг,.јпег“
помоћ=„Изаберите своју слику“
/>
Код показује како да користите неке друге елементе уноса и поставите правила валидације.
ФормКит укључује реквизит типа који се зове „форма“ који обмотава све улазне елементе. Он прати статус валидације обрасца и блокира кориснике да га поднесу ако су неки уноси неважећи. Поред тога, аутоматски генерише дугме за слање.
тип="форма"
облик-класа="спољни контејнер"
субмит-лабел="Регистровати"
@прихвати="Регистровати">
Комбинујући све заједно представља комплетан облик, као што је приказано на слици испод.
Генерисање образаца помоћу ФормКит шеме
Са ЈСОН шемама, могуће је генерисати форме сличне улазним елементима, као што је урађено раније. Да бисте генерисали образац, једноставно доставите свој низ шема у компоненту коришћењем шема проп.
Тхе Сцхеме Арраи
конст шема = [
{
$формкит: "е-пошта",
име: "е-пошта",
етикета: "Адреса Е-поште",
чувар места: "Унесите емаил",
валидација: "обавезна|е-пошта",
},
{
$формкит: 'Лозинка',
име: 'Лозинка',
етикета: 'Лозинка',
валидација: 'потребна|дужина: 5,16'
},
{
$формкит: 'Лозинка',
име: 'потврда лозинке',
етикета: 'Потврди лозинку',
валидација: 'обавезно|потврди',
валидатионЛабел: 'Потврда лозинке',
},
];Затим се прослеђује у проп у компоненти ФормКит.
"форма" облик-класа="спољни контејнер"субмитлабел="Пријавите се">
<ФормКитСцхема:сцхема="шема" />
ФормКит> Ово је коначни генерисани излаз:
Бржи приступ изградњи образаца у Вуе3
ФормКит пружа бржи и ефикаснији приступ изградњи образаца у Вуе 3. Са ФормКит-ом, можете елиминисати потребу за креирањем шаблонских шаблона од нуле, омогућавајући вам да се фокусирате на директну имплементацију логике. Овај поједностављени процес не само да штеди време већ и повећава продуктивност.
Поред тога, ФормКит омогућава динамичко приказивање образаца кроз условно приказивање. Ова функција вам омогућава да креирате интерактивне и усер-фриендли интерфејсе за кориснике, где се елементи обрасца приказују или сакривају на основу одређених услова.
