Χρειάζεστε έντυπα για το επόμενο έργο σας; Δείτε πώς μπορείτε να δημιουργήσετε φόρμες με το FormKit.
Οι φόρμες είναι η πύλη για την αλληλεπίδραση των χρηστών με την αίτησή σας και την παροχή βασικών δεδομένων για εργασίες όπως η δημιουργία λογαριασμού, η επεξεργασία πληρωμών και η συλλογή πληροφοριών. Αλλά η κατασκευή φορμών μπορεί να είναι μια τρομακτική εργασία, που απαιτεί εκτεταμένο κώδικα λέβητα που είναι χρονοβόρος και επιρρεπής σε σφάλματα
Το FormKit προσφέρει μια λύση παρέχοντας προκατασκευασμένα εξαρτήματα που εξαλείφουν την ανάγκη για κωδικό λέβητα. Δείτε πώς να το χρησιμοποιήσετε.
Τι είναι το FormKit;
FormKit είναι ένα πλαίσιο δημιουργίας φόρμας ανοιχτού κώδικα που αναπτύχθηκε ειδικά για το Vue 3, σχεδιασμένο για να απλοποιεί τη διαδικασία δημιουργίας υψηλής ποιότητας, έτοιμων για παραγωγή φορμών. Είναι μια βελτιωμένη έκδοση του δημοφιλούς Vue Formulate βιβλιοθήκη και παρέχει περισσότερες από 25 προσαρμόσιμες και προσβάσιμες επιλογές εισαγωγής, μαζί με ένα προκαθορισμένο σύνολο κανόνων επικύρωσης.
Το FormKit προσφέρει επίσης τη δυνατότητα δημιουργίας φορμών μέσω δυναμικών σχημάτων συμβατών με JSON, καθιστώντας εύκολη τη γρήγορη δημιουργία πολύπλοκων φορμών. Επιπλέον, το FormKit έχει μια ενεργή κοινότητα στο Discord, η οποία παρέχει υποστήριξη και ενισχύει τη συνεργασία μεταξύ των χρηστών. Με τις ολοκληρωμένες δυνατότητες και το σύστημα υποστήριξης, το FormKit είναι ένα αξιόπιστο και αποτελεσματικό εργαλείο για προγραμματιστές που θέλουν να δημιουργήσουν φόρμες για τα έργα τους στο Vue 3.
Χαρακτηριστικά του FormKit Framework
Θα βρείτε μια μεγάλη ποικιλία λειτουργιών δημιουργίας φόρμας στο FormKit.
1. Single Component API
Ένα από τα ενδιαφέροντα χαρακτηριστικά του FormKit είναι το API ενός συστατικού: συστατικό. Σας δίνει πρόσβαση σε όλους τους τύπους εισόδου. Αυτό παρέχει άμεση και εύκολη πρόσβαση στη δημιουργία στοιχείων φόρμας αντί να χρειάζεται να χρησιμοποιείτε εγγενή στοιχεία HTML.
2. Προκαθορισμένοι κανόνες επικύρωσης
Το Formkit απλοποιεί τον χειρισμό των επικυρώσεων φόρμας επιτρέποντάς σας να εφαρμόσετε απευθείας ένα σύνολο κανόνων στις εισόδους χρησιμοποιώντας το στηρίγμα επικύρωσης. Έχει πάνω από 30 διαφορετικούς προκαθορισμένους κανόνες που μπορείτε να επιλέξετε ανάλογα με τις προτιμήσεις σας. Εναλλακτικά, μπορείτε να δημιουργήσετε προσαρμοσμένους κανόνες εγγεγραμμένους καθολικά ή ειδικά στην εισαγωγή για πολύπλοκους περιορισμούς.
3. Προσαρμόσιμες επιλογές στυλ
Το FormKit δεν διαθέτει προεπιλεγμένες επιλογές στυλ, αλλά έχει ένα προαιρετικό βασικό θέμα - Genesis. Πρέπει να το εγκαταστήσετε ξεχωριστά.
Εγκαθιστώντας πρώτα το @formkit/themes πακέτο.
npm εγκατάσταση @formkit/themesΣτη συνέχεια, εισάγετέ το στο έργο σας
εισαγωγή'@formkit/themes/genesis'Άλλες επιλογές στυλ περιλαμβάνουν τη χρήση προσαρμοσμένων κλάσεων που σας επιτρέπουν να εφαρμόσετε τα δικά σας στυλ και τάξεις στην παρεχόμενη σήμανση του FormKit.
4. Δημιουργία Σχήματος
Η δημιουργία σχημάτων του FormKit είναι μια εξαιρετική δυνατότητα που απλοποιεί τη διαδικασία δημιουργίας πεδίων φόρμας. Ένα σχήμα είναι ένας πίνακας αντικειμένων, με κάθε αντικείμενο να αντιπροσωπεύει ένα στοιχείο HTML και μπορείτε να αναπαραστήσετε μόνο σε μορφή JSON.
Ο πίνακας σχήματος αποτελείται από αντικείμενα κόμβου FormKit που αντιστοιχούν σε διάφορα στοιχεία, όπως στοιχεία HTML, στοιχεία ή κόμβους κειμένου. Αυτά τα αντικείμενα μπορούν να αναφέρονται σε προϋπάρχουσες μεταβλητές Vue και να αποδίδουν οποιαδήποτε σήμανση ή στοιχείο με επεξεργάσιμα χαρακτηριστικά και στηρίγματα, καθιστώντας το μια αποτελεσματική μέθοδο δημιουργίας και προσαρμογής φορμών. Από προεπιλογή, δεν είναι καταχωρημένο παγκοσμίως, επομένως πρέπει να το εισαγάγετε.
εισαγωγή { FormKitSchema } από'@formkit/vue'Ενσωμάτωση FormKit στο Vue3
Για να ξεκινήσετε να χρησιμοποιείτε το FormKit σε μια εφαρμογή Vue 3, πρώτα εγκαταστήστε το στο έργο σας. Αυτή η ενότητα θα περιλαμβάνει μια επίδειξη χρησιμοποιώντας μια νέα εφαρμογή vue από την αρχή.
Προϋποθέσεις για τη χρήση του FormKit
Πριν ξεκινήσετε, βεβαιωθείτε ότι έχετε τα εξής:
- Θεμελιώδης κατανόηση του Vue και της JavaScript
- Το Node.js και το npm έχουν ρυθμιστεί στον υπολογιστή σας
Μόλις ολοκληρώσετε την ταχύτητα, είστε έτοιμοι να δημιουργήσετε την πρώτη σας εφαρμογή.
Δημιουργία νέας εφαρμογής Vue
Αρχικά, εκτελέστε την παρακάτω εντολή στο τερματικό σας για να αρχικοποιήσετε μια νέα εφαρμογή Vue:
npm init vue@αργότεροΣτη συνέχεια, ακολουθήστε τα βήματα που καθορίζονται στην προτροπή σύμφωνα με τις προτιμήσεις σας. Αφού εγκατασταθεί πλήρως το έργο, προχωρήστε στην εγκατάσταση του FormKit στην εφαρμογή.
npm εγκατάσταση @formkit/vue Στη συνέχεια, στο main.js αρχείο.
εισαγωγή {δημιουργία εφαρμογής } από'vue'
εισαγωγή"./style.css"
εισαγωγή App από"./App.vue"
// Ρύθμιση Formkit
εισαγωγή { plugin, defaultConfig } από"@formkit/vue";
// Εισαγωγή του θέματος Genesis
εισαγωγή"@formkit/themes/genesis";
createApp (App).use(συνδέω, defaultConfig).mount('#εφαρμογή')Το πακέτο @formkit/vue συνοδεύεται από μια προσθήκη Vue και μια προεπιλεγμένη ρύθμιση παραμέτρων για απρόσκοπτη εγκατάσταση. Μόλις ολοκληρώσετε τη ρύθμιση, είστε έτοιμοι να ενσωματώσετε το στοιχείο στην εφαρμογή σας Vue 3. Επίσης, μπορείτε να προσθέσετε τη ρύθμιση για τα θέματα Genesis όπως αναφέρθηκε προηγουμένως.
Δημιουργία επαναχρησιμοποιήσιμων φορμών με το FormKit
Αυτή η ενότητα δείχνει πώς να χρησιμοποιήσετε το FormKit για τη δημιουργία μιας λειτουργικής και προσαρμόσιμης φόρμας δημιουργώντας μια απλή φόρμα εγγραφής.
Για καλύτερη δομή κώδικα, είναι καλό να δημιουργήσετε ένα ξεχωριστό αρχείο για αυτό το στοιχείο: RegistrationForm.vue
Αρχικά, ορίστε το στοιχείο εισόδου χρησιμοποιώντας αυτήν τη μορφή
τύπος="κείμενο"
ετικέτα="Ονομα"
placeholder="Αμπιόλα"
επικύρωση="απαιτείται|μήκος: 4"
βοήθεια = "Εισαγάγετε τουλάχιστον 4 χαρακτήρες"
<FormKit/>Αυτός ο κώδικας δείχνει πώς να χρησιμοποιήσετε το FormKit για να δημιουργήσετε μια εισαγωγή κειμένου χρησιμοποιώντας έναν τύπο κειμένου. Η βάση επικύρωσης διαχωρίζει κανόνες χρησιμοποιώντας το σύμβολο σωλήνα "|". Το βοηθητικό στήριγμα τοποθετεί ένα μικρό κείμενο ακριβώς κάτω από το στοιχείο εισόδου.
Επίσης, μπορείτε να εξερευνήσετε άλλους τύπους εισόδου όπως οι παρακάτω.
τύπος="κείμενο"
ετικέτα="Επίθετο"
placeholder="Esther"
επικύρωση="απαιτείται|μήκος: 4"
βοήθεια = "Εισαγάγετε τουλάχιστον 4 χαρακτήρες"
/>
τύπος="ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ"
ετικέτα="Διεύθυνση ηλεκτρονικού ταχυδρομείου"
πρόθεμα-εικονίδιο="ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ"
επικύρωση="απαιτείται|email"
placeholder="[email protected]"
/>
τύπος="ημερομηνία"
ετικέτα="Ημερομηνια γεννησης"
βοήθεια="Εισαγάγετε τα γενέθλιά σας με τη μορφή ΗΗ/ΜΜ/ΕΕΕΕ"
επικύρωση="απαιτείται"
/> v-model="αξία"
τύπος="ραδιόφωνο"
ετικέτα="Γένος"
:options="['Αρσενικό θηλυκό']"
βοήθεια="Επιλέξτε το φύλο σας"
/>
τύπος="αρχείο"
ετικέτα="Ανεβασε την φωτογραφια σου"
αποδέχομαι=".jpg,.png,.jpeg"
βοήθεια="Επιλέξτε την εικόνα σας"
/>
Ο κώδικας δείχνει πώς να χρησιμοποιήσετε ορισμένα από τα άλλα στοιχεία εισόδου και να ορίσετε τους κανόνες επικύρωσης.
Το FormKit περιλαμβάνει ένα στηρίγμα τύπου που ονομάζεται "form" που τυλίγει όλα τα στοιχεία εισόδου. Παρακολουθεί την κατάσταση επικύρωσης της φόρμας και αποκλείει τους χρήστες από το να την υποβάλουν εάν τυχόν στοιχεία εισόδου είναι άκυρα. Επιπλέον, δημιουργεί αυτόματα ένα κουμπί υποβολής.
τύπος="μορφή"
μορφή-τάξη="εξωτερικό δοχείο"
υποβάλλω-ετικέτα="Κανω ΕΓΓΡΑΦΗ"
@υποβάλλουν="Κανω ΕΓΓΡΑΦΗ">
Συνδυάζοντας τα πάντα μαζί παρουσιάζεται η πλήρης φόρμα, όπως φαίνεται στην παρακάτω εικόνα.
Δημιουργία φόρμας με χρήση του σχήματος του FormKit
Με τα σχήματα JSON, είναι δυνατό να δημιουργηθούν φόρμες παρόμοιες με τα στοιχεία εισόδου, όπως έγινε νωρίτερα. Για να δημιουργήσετε τη φόρμα, απλώς παρέχετε τον πίνακα σχήματός σας στο συστατικό με τη χρήση του σχήμα στήριγμα.
Ο πίνακας σχημάτων
συνθ σχήμα = [
{
$formkit: "ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ",
όνομα: "ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ",
επιγραφή: "Διεύθυνση ηλεκτρονικού ταχυδρομείου",
σύμβολο κράτησης θέσης: "Συμπληρώστε το email σας",
επικύρωση: "απαιτείται|email",
},
{
$formkit: 'Κωδικός πρόσβασης',
όνομα: 'Κωδικός πρόσβασης',
επιγραφή: 'Κωδικός πρόσβασης',
επικύρωση: "απαιτείται|μήκος: 5,16"
},
{
$formkit: 'Κωδικός πρόσβασης',
όνομα: 'επιβεβαίωση κωδικού',
επιγραφή: 'Επιβεβαίωση Κωδικού',
επικύρωση: "απαιτείται|επιβεβαίωση",
επικύρωσηΕτικέτα: 'Επιβεβαίωση κωδικού πρόσβασης',
},
];Στη συνέχεια μεταβιβάζεται στο στηρίγμα στο στοιχείο FormKit.
"μορφή" μορφή-τάξη="εξωτερικό δοχείο"υποβολή ετικέτας="Σύνδεση">
<FormKitSchema:σχήμα="σχήμα" />
FormKit> Αυτή είναι η τελική παραγόμενη έξοδος:
Μια πιο γρήγορη προσέγγιση για τη δημιουργία φορμών στο Vue3
Το FormKit παρέχει μια ταχύτερη και πιο αποτελεσματική προσέγγιση για τη δημιουργία φορμών στο Vue 3. Με το FormKit, μπορείτε να εξαλείψετε την ανάγκη δημιουργίας προτύπων boilerplate από την αρχή, επιτρέποντάς σας να εστιάσετε στην άμεση εφαρμογή της λογικής. Αυτή η απλοποιημένη διαδικασία όχι μόνο εξοικονομεί χρόνο αλλά ενισχύει και την παραγωγικότητα.
Επιπλέον, το FormKit επιτρέπει τη δυναμική απόδοση φορμών μέσω απόδοσης υπό όρους. Αυτή η δυνατότητα σάς δίνει τη δυνατότητα να δημιουργήσετε διαδραστικές και φιλικές προς το χρήστη διεπαφές για τους χρήστες, όπου τα στοιχεία της φόρμας εμφανίζονται ή κρύβονται βάσει συγκεκριμένων συνθηκών.
