- Input
🧬 Συγκεντρώστε τα συστατικά
Input
ContributeΤι είναι η είσοδος?
Το στοιχείο εισαγωγής κειμένου είναι ένα στοιχείο διεπαφής χρήστη που επιτρέπει στους χρήστες να εισάγουν και να επεξεργάζονται κείμενο σε μια μορφή ή πεδίο εισαγωγής.
Ιδιότητες
| Ιδιότητες | Περιγραφή |
|---|---|
| Προεπιλεγμένη τιμή | Η αρχική τιμή του εξαρτήματος. Μπορείτε να αλλάξετε δυναμικά την αρχική τιμή πληκτρολογώντας JavaScript στην {{}}. |
| Υποκατάστατο | Η τιμή θα εμφανίζεται όταν το πεδίο εισαγωγής είναι κενό. |
| Ετικέτα | Το όνομα του πεδίου που εμφανίζεται στο χρήστη |
| Λεζάντα | Μια λεζάντα που χρησιμοποιείται για να περιγράψει λεπτομερώς το πεδίο |
| Κρυφή ετικέτα | Ορίστε αν θα εμφανίζεται η ετικέτα |
| Θέση | Ορίστε τη θέση της ετικέτας σε σχέση με το στοιχείο |
| Ευθυγράμμιση | Ορισμός της στοίχισης (στοίχιση αριστερά ή δεξιά) της ετικέτας |
| Width | Όταν η ετικέτα βρίσκεται στην αριστερή πλευρά του εξαρτήματος, ορίστε το λόγο πλάτους της ετικέτας. |
| Χειριστής Συμβάντων | Ερωτήματα ενεργοποίησης, έλεγχος εφαρμογών, ή κλήση άλλων API σε απόκριση σε συμβάντα εφαρμογής. |
| Απενεργοποιημένο | Ελέγξτε την κατάσταση του αν το στοιχείο είναι απενεργοποιημένο. Το στοιχείο δεν μπορεί να τροποποιηθεί ή να εστιαστεί όταν είναι απενεργοποιημένο. |
| Μόνο Για Ανάγνωση | Ελέγξτε την κατάσταση του αν το στοιχείο είναι μόνο για ανάγνωση. Ένα στοιχείο μόνο για ανάγνωση μπορεί να επιλεγεί και να εστιασθεί, αλλά δεν μπορεί να τροποποιηθεί. |
| Εμφάνιση κουμπιού καθαρισμού | ελέγχει αν εμφανίζεται ή όχι ένα κουμπί εκκαθάρισης στο πεδίο εισόδου |
| Εμφάνιση αριθμού χαρακτήρων | ελέγχει αν εμφανίζεται ή όχι ο αριθμός χαρακτήρων της εισόδου |
| Πρόθεμα κειμένου | ένα σύντομο κομμάτι κειμένου που εμφανίζεται στα αριστερά του πεδίου εισόδου, που χρησιμοποιείται συχνά για να παρέχει επιπλέον πλαίσιο ή οδηγίες προς το χρήστη |
| Κείμενο επιθέματος | ένα σύντομο κείμενο που εμφανίζεται στα δεξιά του πεδίου εισαγωγής, που χρησιμοποιείται συχνά για να παρέχει πρόσθετες πληροφορίες ή ανατροφοδότηση στον χρήστη |
| Υπόδειξη | Οι χρήστες μπορούν να εισάγουν εδώ την υπόδειξη συστατικού. Η υπόδειξη θα εμφανίζεται όταν εστιάζεται. Υποστηρίζεται μορφή Markdown |
| Απαιτούμενο πεδίο | Ισχύει μόνο όταν ο διακόπτης είναι ενεργοποιημένος. |
| Μοτίβο | καθορίστε ένα μοτίβο κανονικής έκφρασης που η είσοδος του χρήστη πρέπει να ταιριάζει για να θεωρηθεί έγκυρο |
| Μέγιστο μήκος | ορισμός του μέγιστου αριθμού χαρακτήρων που μπορούν να εισαχθούν στο πεδίο εισαγωγής. |
| Ελάχιστο Μήκος | προσδιορίζει τον ελάχιστο αριθμό χαρακτήρων που πρέπει να εισάγει ο χρήστης στο πεδίο εισαγωγής, προκειμένου η εισαγωγή να θεωρηθεί έγκυρη. |
| Προσαρμοσμένοι κανόνες | Δημιουργήστε εδώ τη λογική επικύρωσής σας. Οι κανόνες πρέπει να γίνονται σε JavaScript και να καλύπτονται από {}}. |
| Απόκρυψη μηνύματος επικύρωσης | Μπορείτε να αποκρύψετε το μήνυμα σφάλματος αλλάζοντας την κρυφή κατάσταση όταν η τιμή εισόδου είναι εσφαλμένη. Μπορείτε να αλλάξετε δυναμικά την κρυφή κατάσταση από JavaScript. |
| Πλήκτρο Δεδομένων Φόρμας | Καθορίστε ένα κλειδί ενός στοιχείου φόρμας περιτυλίγματος κατά την κατασκευή του χαρακτηριστικού δεδομένων. |
| Hidden | Δυναμική ρύθμιση της απόκρυψης του συστατικού. Μπορείτε να αλλάξετε την κρυφή κατάσταση μέσω της δυναμικής δυαδικής τιμής. |
| Χρώμα Θέματος | Επιτρέπει στους χρήστες να καθορίσουν το χρώμα φόντου και την αδιαφάνεια του κουμπιού |
Μέθοδος
Μπορείτε να χρησιμοποιήσετε άλλα στοιχεία για τον έλεγχο της εφαρμογής. Υποστηρίζουμε τις ακόλουθες δύο μεθόδους:
- ορισμός
Για να ορίσετε την τιμή εισόδου, για παράδειγμα, {{‘value1’}}
| Ιδιότητες | Περιγραφή |
|---|---|
| Τιμή | Input value |
- καθαρή αξία
Για να καθαρίσετε την τιμή του επιλεγμένου στοιχείου
- focus
Όταν καλείται η μέθοδος εστίασης, το πεδίο εισαγωγής θα επισημανθεί και θα είναι έτοιμο για τον χρήστη να ξεκινήσει την πληκτρολόγηση χωρίς την ανάγκη ο χρήστης να κάνει κλικ στο πεδίο εισαγωγής
Παράδειγμα Χρήσης:
Υποστήριξη στοιχείου εισαγωγής ακούγοντας την εκδήλωση onChange άλλων στοιχείων χρησιμοποιώντας το ενσωματωμένο σύστημα γεγονότων. Ρυθμίστε το ακολουθώντας τα παρακάτω βήματα:
- Προσθέστε μια σκανδάλη συμβάντος στο στοιχείο που θέλετε να ακούσετε. Για παράδειγμα, αν θέλετε να ακούσετε το
onChangeevent of a Radio Group component, θα προσθέσεις έναν χειριστή συμβάντων σε αυτό το στοιχείο της ομάδας ραδιοφώνου. - Στο χειριστή συμβάντων επεξεργασίας, επιλέξτε
Control componentεν ενεργεία, επιλέξτε το στοιχείοInputπου θέλετε να ενημερώσετε ως στόχο του συμβάντος. - Επιλέξτε την ενέργεια
SetValueκαι επιλέξτε την κατάλληλη τιμή για την εφαρμογή εισόδου. Αυτή θα είναι η τιμή που έχει και θα ενημερώνει το στοιχείο εισόδου όταν ενεργοποιείται το γεγονός. - Αποθηκεύστε τις ρυθμίσεις ενεργοποίησης του συμβάντος και επαναλάβετε τη διαδικασία για οποιαδήποτε άλλα στοιχεία θέλετε να ακούσετε.
Μόλις ρυθμίσετε την ενεργοποίηση του γεγονότος, το στοιχείο εισόδου θα ενημερώνεται αυτόματα κάθε φορά που το συμβάν onChange ενεργοποιείται στα άλλα στοιχεία. Αυτό σας επιτρέπει να δημιουργήσετε δυναμικές διεπαφές που ανταποκρίνονται στην είσοδο του χρήστη σε πραγματικό χρόνο, καθιστώντας ευκολότερη την πλοήγηση και την αλληλεπίδραση των χρηστών με την εφαρμογή σας.
Χειριστής συμβάντων
| Γεγονός | Περιγραφή |
|---|---|
| Αλλαγή | Όταν ένας χρήστης αλλάζει την επιλεγμένη τιμή εισόδου |
| Εστίαση | Όταν ένας χρήστης μετακινεί τον κέρσορα του ποντικιού στο στοιχείο εισόδου |
| Blur | Όταν ένας χρήστης τελειώνει την αξία εισαγωγής και κλείνει από το να επικεντρωθεί στο στοιχείο cascader |
Δεδομένα
Το στοιχείο έχει κάποια κοινώς χρησιμοποιούμενα δεδομένα, τα οποία μπορούν να κληθούν μέσω του {{componentName.propertyName}} στην εφαρμογή.
| Όνομα ιδιότητας | Περιγραφή |
|---|---|
| τιμή | τιμή εισόδου χρήστη |
| colorScheme | χρώμα φόντου του κουμπιού |
| απενεργοποιημένο | μια δυαδική τιμή δείχνει την κατάσταση απενεργοποιημένης λειτουργίας |
| Εμφάνιση Ονόματος | το όνομα αυτού του στοιχείου (δηλαδή το κουμπί1) |
| formDataKey | το κλειδί δεδομένων εντύπου για την εισαγωγή |
| hidden | κρυφή κατάσταση (αληθής ή ψευδές) |
| ετικέτα | τιμή ετικέτας |
| labelΣτοίχιση | στοίχιση της ετικέτας εισόδου (αριστερά ή δεξιά) |
| ετικέταΘέση | θέση της ετικέτας εισόδου (αριστερά ή δεξιά) |
| ετικέταΠλάτος | ο ακέραιος αριθμός που αντιπροσωπεύει το πλάτος της ετικέτας. |
| μέγιστο μήκος | η τιμή του μέγιστου μήκους |
| minΜήκος | η τιμή του ελάχιστου μήκους |
| placeholder | τιμή κράτησης θέσης |
| prefixText | τιμή του προθέματος κειμένου |
| επίθημαΚείμενο | τιμή του επιθέματος κειμένου |
| Μόνο για ανάγνωση | μια δυαδική τιμή δείχνει την έτοιμηΜόνο κατάσταση της εισαγωγής. |
| απαιτείται | μια δυαδική τιμή δείχνει την απαιτούμενη κατάσταση της εισόδου. |
| regex | τακτική έκφραση εισόδου |
| ΕμφάνισηΑριθμός χαρακτήρων | μια δυαδική τιμή δείχνει αν εμφανίζεται ο αριθμός χαρακτήρων της εισόδου |
| tooltipText | τιμή κειμένου υπόδειξης |
Παράδειγμα: {{input1.value}}
Περίπτωση χρήσης
Παρακάτω είναι μερικά παραδείγματα για την προσαρμογή του στοιχείου εισαγωγής.
- Πρόθεμα:
- Κατάληξη:
- Υπόδειξη:
- Μοτίβο:
