typeCréons l'entrée la plus simple possible - une qui ne produit que "Hello world".
Même si cet exemple simpliste ne contient aucun mécanisme d'entrée/sortie, il est toujours considéré comme une entrée complète. Il peut avoir une valeur, exécuter des règles de validation (elles ne seront pas affichées, mais elles peuvent bloquer les soumissions de formulaires), et exécuter des plugins. Fondamentalement, toutes les entrées sont des nœuds de base et la définition de l'entrée fournit les mécanismes pour interagir avec ce nœud.
Pour utiliser votre entrée personnalisée n'importe où dans votre application via une chaîne "type" (ex : <FormKit type="foobar" />) vous pouvez ajouter une propriété inputs aux options defaultConfig. Les noms des propriétés de l'objet inputs deviennent les chaînes "type" disponibles pour le composant <FormKit> dans votre application.
import { createApp } from 'vue'
import App from 'App.vue'
import { plugin, defaultConfig } from '@formkit/vue'
const helloWorld = {
type: 'input',
schema: ['Hello world'],
}
createApp(App)
.use(
plugin,
defaultConfig({
inputs: {
// La propriété sera le “type” dans <FormKit type="hello">
hello: helloWorld,
},
})
)
.mount('#app')Maintenant que nous avons défini notre entrée, nous pouvons l'utiliser n'importe où dans l'application :
L'exemple ci-dessus étend la bibliothèque @formkit/inputs (via defaultConfig). Cependant, une fonctionnalité puissante de FormKit est sa capacité à charger des bibliothèques d'entrées à partir de plusieurs plugins. Ces entrées peuvent ensuite être enregistrées n'importe où les plugins peuvent être définis :
Refactorisons notre entrée hello world pour utiliser son propre plugin :
Remarquez dans l'exemple ci-dessus que notre plugin a été défini sur un parent de l'élément qui l'a réellement utilisé ! C'est grâce à l'héritage de plugin — une fonctionnalité de base des plugins FormKit.
Votre entrée peut être écrite en utilisant le schéma de FormKit ou un composant Vue générique. Chaque approche a ses avantages et ses inconvénients :
| Code | Avantages | Inconvénients |
|---|---|---|
| Vue |
|
|
| Schema |
|
|
Même si vous préférez écrire une entrée personnalisée en utilisant un composant Vue standard, vous pouvez toujours utiliser un schéma dans votre définition d'entrée. Veuillez lire la section Utilisation de createInput pour étendre le schéma de base.
La principale conclusion est que si vous prévoyez d'utiliser une entrée personnalisée sur plusieurs projets - alors envisagez d'utiliser l'approche basée sur le schéma. Si votre entrée personnalisée ne sera utilisée que sur un seul projet et que la flexibilité n'est pas une préoccupation, utilisez un composant Vue.