- Χρονικό Εύρος
🧬 Συγκεντρώστε τα συστατικά
Χρονικό Εύρος
ContributeΤι είναι το εύρος χρόνου?
Το συστατικό Time Range είναι ένα στοιχείο UI που επιτρέπει στους χρήστες να επιλέξουν ένα εύρος από μια 24ωρη διεπαφή, χρησιμοποιείται συνήθως σε μορφές ή διεπαφές εισόδου δεδομένων όπου ο χρήστης πρέπει να καθορίζει ένα χρονικό εύρος έναρξης και λήξης.
Όταν ένα συστατικό εύρους χρόνου προστίθεται σε καμβά, εμφανίζει δύο 24-ωρες διεπαφές δίπλα-δίπλα. Η μία διεπαφή χρησιμοποιείται για την επιλογή της ώρας έναρξης, ενώ η άλλη χρησιμοποιείται για την επιλογή της ώρας λήξης. Ο χρήστης μπορεί να ρυθμίσει το χρόνο μετακινώντας τον κέρσορα του ποντικιού ή χρησιμοποιώντας τα πάνω και κάτω βέλη.
Properties
Διαθέσιμες ιδιότητες χρονικού εύρους. Η JavaScript μπορεί να γραφτεί για να διαβάσει ή να τροποποιήσει πληροφορίες σχετικά με τα στοιχεία.
| Ιδιότητες | Περιγραφή |
|---|---|
| Ώρα έναρξης | Η προεπιλεγμένη τιμή ώρας έναρξης του στοιχείου |
| Ώρα λήξης | Η προεπιλεγμένη τιμή τελικού χρόνου του στοιχείου |
| Μορφή | Μια έγκυρη συμβολοσειρά μορφής ημερομηνίας. Δείτε https://day.js.org/docs/en/parse/string-format. |
| Έναρξη Υποδοχής Θέσης | Η τιμή θα εμφανίζεται όταν το πεδίο ώρας έναρξης είναι κενό. |
| Υποδοχή Τελικής Θέσης | Η τιμή θα εμφανίζεται όταν το πεδίο λήξης χρόνου εισαγωγής είναι κενό. |
| Μέγεθος βήματος | το μέγεθος του βήματος σε μονάδα λεπτών |
| Ετικέτα | Το όνομα του πεδίου που εμφανίζεται στο χρήστη |
| Λεζάντα | Μια λεζάντα που χρησιμοποιείται για να περιγράψει λεπτομερώς το πεδίο |
| Κρυφή ετικέτα | Ορίστε αν θα εμφανίζεται η ετικέτα |
| Θέση | Ορίστε τη θέση της ετικέτας σε σχέση με το στοιχείο |
| Ευθυγράμμιση | Ορισμός της στοίχισης (στοίχιση αριστερά ή δεξιά) της ετικέτας |
| Width | Όταν η ετικέτα βρίσκεται στην αριστερή πλευρά του εξαρτήματος, ορίστε το λόγο πλάτους της ετικέτας. |
| Χειριστής Συμβάντων | Ερωτήματα ενεργοποίησης, έλεγχος εφαρμογών, ή κλήση άλλων API σε απόκριση σε συμβάντα εφαρμογής. |
| Απενεργοποιημένο | Ελέγξτε την κατάσταση του αν το στοιχείο είναι απενεργοποιημένο. Το στοιχείο δεν μπορεί να τροποποιηθεί ή να εστιαστεί όταν είναι απενεργοποιημένο. |
| Υπόδειξη | Οι χρήστες μπορούν να εισάγουν εδώ την υπόδειξη συστατικού. Η υπόδειξη θα εμφανίζεται όταν εστιάζεται. Υποστηρίζεται μορφή Markdown |
| Εμφάνιση κουμπιού καθαρισμού | ελέγχει αν εμφανίζεται ή όχι ένα κουμπί εκκαθάρισης στο πεδίο εισόδου |
| Απαιτούμενο πεδίο | Ισχύει μόνο όταν ο διακόπτης είναι ενεργοποιημένος. |
| Προσαρμοσμένοι κανόνες | Δημιουργήστε εδώ τη λογική επικύρωσής σας. Οι κανόνες πρέπει να γίνονται σε JavaScript και να καλύπτονται από {}}. |
| Απόκρυψη μηνύματος επικύρωσης | Μπορείτε να αποκρύψετε το μήνυμα σφάλματος αλλάζοντας την κρυφή κατάσταση όταν η τιμή εισόδου είναι εσφαλμένη. Μπορείτε να αλλάξετε δυναμικά την κρυφή κατάσταση από JavaScript. |
| Πλήκτρο Δεδομένων Φόρμας | Καθορίστε ένα κλειδί ενός στοιχείου φόρμας περιτυλίγματος κατά την κατασκευή του χαρακτηριστικού δεδομένων. |
| Hidden | Δυναμική ρύθμιση της απόκρυψης του συστατικού. Μπορείτε να αλλάξετε την κρυφή κατάσταση μέσω της δυναμικής δυαδικής τιμής. |
| Χρώμα Θέματος | Επιτρέπει στους χρήστες να καθορίσουν το χρώμα φόντου και την αδιαφάνεια του κουμπιού |
Methods
Μπορείτε να χρησιμοποιήσετε άλλα στοιχεία για τον έλεγχο της εφαρμογής. Υποστηρίζουμε τις ακόλουθες δύο μεθόδους:
- setStartTime
Για να ορίσετε την τιμή της ημερομηνίας έναρξης, για παράδειγμα, {{“value1”}}
| Ιδιότητες | Περιγραφή |
|---|---|
| Τιμή | Τιμή ώρας έναρξης εισαγωγής |
- setEndTime
Για να ορίσετε την τιμή της ημερομηνίας λήξης, για παράδειγμα, {{“value2”}}
| Ιδιότητες | Περιγραφή |
|---|---|
| Τιμή | Τιμή χρόνου εισόδου |
- καθαρή αξία
Για να καθαρίσετε την τιμή του επιλεγμένου στοιχείου
- validate
Για να επιβεβαιωθεί ότι οι πληροφορίες εισόδου είναι νόμιμες
- clearValidate
Για να καθαρίσετε το μήνυμα επικύρωσης
Χειριστής συμβάντων
| Γεγονός | Περιγραφή |
|---|---|
| Αλλαγή | Όταν ένας χρήστης αλλάζει την επιλεγμένη τιμή του χρόνου, εκτελέστε συγκεκριμένη ενέργεια προσαρμοσμένη από τους χρήστες. |
Δεδομένα
Το στοιχείο έχει κάποια κοινώς χρησιμοποιούμενα δεδομένα, τα οποία μπορούν να κληθούν μέσω του {{componentName.propertyName}} στην εφαρμογή.
| Όνομα ιδιότητας | Περιγραφή |
|---|---|
| colorScheme | την ιδιότητα χρώματος της ημερομηνίας |
| Προσαρμοσμένος κανόνας | ο προσαρμοσμένος κανόνας που καθόρισε ο χρήστης |
| απενεργοποιημένο | μια δυαδική τιμή δείχνει την κατάσταση απενεργοποιημένης λειτουργίας |
| Εμφάνιση Ονόματος | το όνομα αυτού του συστατικού (δηλαδή ο καταρροής) |
| startTime | τιμή ώρας έναρξης |
| endTime | τιμή τέλους χρόνου |
| startPlaceholder | τιμή κράτησης θέσης για την ώρα έναρξης |
| endPlaceholder | τιμή κράτησης θέσης για την ώρα λήξης |
| συμβάντα | μια τιμή πίνακα για την ακολουθία συμβάντων |
| μορφή | το μορφότυπο της ημερομηνίας και της ώρας |
| formDataKey | Η κλείδα δεδομένων της ημερομηνίας |
| hidden | μια δυαδική τιμή δείχνει την κρυφή κατάσταση του κουμπιού |
| hideValidationMessage | μια δυαδική τιμή δείχνει αν το μήνυμα επικύρωσης είναι κρυμμένο |
| ετικέτα | τιμή ετικέτας |
| labelΣτοίχιση | ευθυγράμμιση της ετικέτας cascader (αριστερά ή δεξιά) |
| ετικέταΘέση | θέση της ετικέτας cascader (αριστερά ή δεξιά) |
| ετικέταΠλάτος | ο ακέραιος αριθμός που αντιπροσωπεύει το πλάτος της ετικέτας |
| λεπτόΒήμα | ελάχιστη τιμή μεγέθους βήματος |
| απαιτείται | μια δυαδική τιμή δείχνει την απαιτούμενη κατάσταση της εισόδου. |
| Εμφάνιση | μια δυαδική τιμή δείχνει ότι η ημερομηνία θα εμφανιστεί καθαρή |
| τιμή | Επιλεγμένη τιμή |
Παράδειγμα: {{rangeTime1.value[0]}}
Περίπτωση χρήσης
Στη συνέχεια, θα δείξουμε πώς να χαρτογραφήσουμε τα δεδομένα από την πηγή δεδομένων έως το χρονικό εύρος και να ορίσουμε την τελική τιμή στην τρέχουσα ώρα με ένα κουμπί.
Βήμα 1 Προσθέστε μια ενέργεια
Επιτρέψτε μας να δημιουργήσουμε έναν πίνακα στο REST API που ονομάζεται promoteCodes, συμπεριλαμβανομένων 6 στηλών: code, id, createdAt, expiredAt, startedAt, updatedAt. Θα χρησιμοποιήσουμε το αρχικό και έληξεΚατά το χρόνο για τη χρήση δειγμάτων.
Στη συνέχεια, μπορούμε να δημιουργήσουμε μια νέα δράση για REST API από τη λίστα δράσης, λίστα όλων των δεδομένων σε promoteCodes και ονομάζεται restapi1.
Πατήστε Save και Run για να ενεργοποιήσετε αυτήν την ενέργεια.
Βήμα 2 Προσθήκη Συστατικών
Στη συνέχεια, μπορούμε να προσθέσουμε ένα time range component και ένα button component στον καμβά. Για την προεπιλεγμένη τιμή χρόνου έναρξης του στοιχείου εύρους ημερομηνιών, χρησιμοποιούμε την εκκίνησηΚατά την ώρα της πρώτης προώθησης κώδικα από τα δεδομένα υπόλοιπου api.
{{restapi1.data.promoteCodes[0].startedAt}}Ομοίως, για την προεπιλεγμένη τιμή χρόνου λήξης, χρησιμοποιούμε έληξεΚατά τη στιγμή της πρώτης προώθησης κώδικα από τα δεδομένα υπόλοιπο api.
{{restapi1.data.promoteCodes[0].expiredAt}}Επισημάνουμε επίσης το κουμπί ως “Τώρα” όπως φαίνεται παρακάτω.
Βήμα 3 Διαμόρφωση του εξαρτήματος
Για το button component, μπορούμε να το ρυθμίσουμε ώστε να ορίζει την τιμή λήξης σε time range component στη σημερινή ημερομηνία.
- Στο χειριστή συμβάντων επεξεργασίας, επιλέξτε
Control componentεν ενεργεία, επιλέξτε τοχρονικό εύροςστοιχείο που θέλετε να ενημερώσετε ως στόχο του γεγονότος. - Επιλέξτε την
setEndTimeενέργεια και ορίστε τηνΏρα λήξηςως{{currentUserInfo.updatedAt}}
4Ο Στάδιο Δοκιμή
Τώρα που όταν κάνετε κλικ στο κουμπί “Τώρα”, η ώρα λήξης θα πρέπει να αλλάξει τη σημερινή ημερομηνία. Όσο για εδώ, έχουμε 20:03:05 αλλά μπορεί να είναι διαφορετικό όταν το δοκιμάσετε.
