Entrée de code-barres
Introduction
Le type d'entrée barcode est une entrée autonome publiée par FormKit. Il est alimenté par la bibliothèque zxing et permet de scanner une variété de types de codes-barres 1D et 2D à l'aide de caméras connectées à votre appareil de navigation.
Installation
L'entrée barcode a une dépendance sur @zxing/library qui est plutôt lourde (environ 100kb minifiée + gzippée). Vous ne devriez inclure cette entrée dans votre projet que si vous avez spécifiquement besoin de la capacité de numérisation de codes-barres via des caméras connectées. Pour une entrée manuelle de code-barres, veuillez envisager d'utiliser une entrée mask ou text avec des règles de validation personnalisées.
Pour installer l'entrée barcode, ajoutez le package @formkit/barcode aux dépendances de votre projet.
npm install @formkit/barcode
Ensuite, dans votre fichier de configuration FormKit, importez l'entrée et ses styles. Puis ajoutez l'entrée à votre configuration globale FormKit.
// formkit.config
...
import { barcode } from '@formkit/barcode'
import '@formkit/barcode/genesis'
...
const config = defaultConfig({
inputs: {
barcode
}
})
...
Utilisation
Basique
Vous pouvez maintenant utiliser le type d'entrée barcode dans vos composants <FormKit />. En interagissant avec l'icône de code-barres, vous pouvez ouvrir une superposition avec un flux vidéo d'une caméra connectée. Vous devrez approuver l'accès à la caméra via votre navigateur.
Personnalisation des codes-barres cibles
Par défaut, l'entrée barcode scannera tous les types de codes-barres pris en charge. La liste des formats de codes-barres cibles peut être modifiée à l'aide de la propriété formats. Une liste complète des formats pris en charge peut être consultée dans la documentation zxing. Tous les noms de format seront en majuscules avec des séparateurs _. Ainsi, QR Code devient QR_CODE, UPC-A devient UPC_A, etc.
Props & Attributs
| Prop | Type | Par défaut | Description |
|---|---|---|---|
| formats | Array | [] | Un tableau de formats disponibles en majuscules avec des séparateurs _ (par exemple, QR_CODE) à partir de l'ensemble disponible sur la documentation zxing. Si aucun tableau formats n'est fourni, tous les formats de code analysables seront considérés comme des entrées valides. |
| barcode-icon | String | code SVG en ligne | Spécifie une icône à placer dans la section barcodeIcon. La section barcodeIcon est cachée pendant le chargement de l'interface de la caméra. |
| loader-icon | String | spinner | Spécifie une icône à placer dans la section loaderIcon. La section loaderIcon est affichée pendant le chargement de l'interface de la caméra. |
| close-icon | String | close | Spécifie une icône à placer dans la section closeIcon. |
| Afficher Universel props | |||
| config | Object | {} | Options de configuration à fournir au nœud d'entrée et à tout nœud descendant de cette entrée. |
| delay | Number | 20 | Nombre de millisecondes à attendre avant que la valeur d'une entrée ne soit déclenchée avant que le commit hook ne soit déclenché. |
| dirtyBehavior | string | touched | Détermine comment le drapeau "dirty" de cette entrée est défini. Peut être défini sur touched ou compare — touched (par défaut) est plus performant, mais ne détectera pas lorsque le formulaire correspond à nouveau à son état initial. |
| errors | Array | [] | Tableau de chaînes à afficher comme messages d'erreur sur ce champ. |
| help | String | '' | Texte pour le texte d'aide associé à l'entrée. |
| id | String | input_{n} | L'identifiant unique de l'entrée. Fournir un identifiant permet également d'accéder globalement au nœud de l'entrée. |
| ignore | Boolean | false | Empêche une entrée d'être incluse dans un parent (groupe, liste, formulaire, etc). Utile lors de l'utilisation d'entrées pour l'interface utilisateur au lieu de valeurs réelles. |
| index | Number | undefined | Permet d'insérer une entrée à l'index donné si le parent est une liste. Si la valeur de l'entrée est indéfinie, elle hérite de la valeur de cette position d'index. Si elle a une valeur, elle l'insère dans les valeurs de la liste à l'index donné. |
| label | String | '' | Texte pour l'élément label associé à l'entrée. |
| name | String | input_{n} | Le nom de l'entrée tel qu'identifié dans l'objet de données. Cela doit être unique au sein d'un groupe de champs. |
| parent | FormKitNode | contextual | Par défaut, le parent est un groupe d'enrobage, une liste ou un formulaire — mais cette propriété permet une affectation explicite du nœud parent. |
| prefix-icon | String | '' | Spécifie une icône à placer dans la section prefixIcon. |
| preserve | boolean | false | Conserve la valeur de l'entrée sur un groupe parent, une liste ou un formulaire lorsque l'entrée est démontée. |
| preserve-errors | boolean | false | Par défaut, les erreurs définies sur les entrées à l'aide de setErrors sont automatiquement effacées lors de l'entrée, en définissant cette propriété sur true, l'erreur est maintenue jusqu'à ce qu'elle soit explicitement effacée. |
| sections-schema | Object | {} | Un objet de clés de section et de valeurs partielles de schéma, où chaque partie de schéma est appliquée à la section respective. |
| suffix-icon | String | '' | Spécifie une icône à placer dans la section suffixIcon. |
| type | String | text | Le type d'entrée à afficher à partir de la bibliothèque. |
| validation | String, Array | [] | Les règles de validation à appliquer à l'entrée. |
| validation-visibility | String | blur | Détermine quand afficher les règles de validation en échec d'une entrée. Les valeurs valides sont blur, dirty et live. |
| validation-label | String | {label prop} | Détermine quelle étiquette utiliser dans les messages d'erreur de validation, par défaut, elle utilise la propriété label si elle est disponible, sinon elle utilise la propriété name. |
| validation-rules | Object | {} | Règles de validation personnalisées supplémentaires à rendre disponibles pour la propriété de validation. |
| value | Any | undefined | Initialise la valeur initiale d'une entrée et/ou de ses enfants. Non réactif. Peut initialiser des groupes entiers (formulaires) et des listes.. |
Sections
Vous pouvez cibler une section spécifique d'une entrée en utilisant la "key" de cette section, ce qui vous permet de modifier les classes de cette section, le HTML (via :sections-schema) ou le contenu (via des emplacements)). En savoir plus sur les sections ici.
Entrée
Superposition
| Section-key | Description |
|---|---|
| barcodeIcon | Un élément pour afficher une icône de code-barres qui bascule l'overlay de la caméra. |
| loaderIcon | Un élément pour afficher une icône de chargement qui s'affiche à la place de l'icône de code-barres pendant le chargement de l'interface de la caméra. |
| dialog | L'élément de dialogue (par défaut un HTML natif dialog) qui contient l'interface de la caméra. |
| scannerContainer | Un conteneur autour de l'icône de fermeture, du flux vidéo, et de la superposition de balayage décorative. |
| closeIcon | Un élément pour afficher une icône de fermeture pour le dialogue. |
| video | Un élément HTML natif video qui montre le flux de la caméra connectée. |
| overlay | Un élément décoratif qui recouvre une partie de la video pour imiter une interface de balayage. |
| overlayDecorators | Un conteneur pour les décorateurs de superposition qui encadrent une partie du flux vidéo. |
| overlayDecoratorTopLeft | Un élément décoratif pour encadrer une partie du flux vidéo. |
| overlayDecoratorTopRight | Un élément décoratif pour encadrer une partie du flux vidéo. |
| overlayDecoratorBottomLeft | Un élément décoratif pour encadrer une partie du flux vidéo. |
| overlayDecoratorBottomRight | Un élément décoratif pour encadrer une partie du flux vidéo. |
| laser | Un élément décoratif qui imite un laser de balayage. |
| Afficher Universel section keys | |
| outer | L'élément d'enrobage le plus externe. |
| wrapper | Un enrobage autour de l'étiquette et de l'entrée. |
| label | L'étiquette de l'entrée. |
| prefix | N'a pas de sortie par défaut, mais permet du contenu directement avant un élément d'entrée. |
| prefixIcon | Un élément pour afficher une icône avant la section de préfixe. |
| inner | Un enrobage autour de l'élément d'entrée réel. |
| suffix | N'a pas de sortie par défaut, mais permet du contenu directement après un élément d'entrée. |
| suffixIcon | Un élément pour afficher une icône après la section de suffixe. |
| input | L'élément d'entrée lui-même. |
| help | L'élément contenant le texte d'aide. |
| messages | Un enrobage autour de tous les messages. |
| message | L'élément (ou plusieurs éléments) contenant un message — le plus souvent des messages de validation et d'erreur. |