L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Il a besoin d'aide avec un formulaire Vue pour les enfants
"Cher Kendo,
J'ai besoin d'un formulaire facile à créer pour mon site Vue 3 afin d'aider les enfants qui ne m'ont pas encore envoyé leurs lettres de Noël. S'il vous plaît, aidez-nous !
Cordialement,
Santa”
Sans aucun doute, voir cet e-mail a complètement changé notre feuille de route et fait du formulaire de Noël Vue notre priorité absolue. Des millions d'enfants et leurs cadeaux dépendaient de nous ! Heureusement, nous étions prêts – plus tôt cette année, nous avons publié le composant Kendo UI for Vue Native Formainsi que tous les éditeurs et directives nécessaires sur la façon de les utiliser afin de couvrir tous les champs nécessaires au Noël du Père Noël. Formulaire :
- Nom
- Âge
- Date de naissance
- Pays
- Téléphone
- Cote « bonté » pour l'année (de 1 à 10)
- nombre de bons et de mauvais l'année
- Délai de livraison
- A écouté vos parents (oui/non)
Dans les lignes ci-dessous, je vais couvrir les informations détaillées sur la façon dont nous avons créé ce superbe formulaire de Noël pour le Père Noël dans Vue 3. Tous les champs sont implémentés avec Kendo Native UI pour les composants Vue et le nouveau swatch violet Kendo Bootstrap theme. Tous sont entièrement accessibles, ce qui nous a permis d'être pleinement professionnels dans cette situation, en gardant à l'esprit que tant de rêves d'enfants en dépendaient.
Comme point de départ, nous importerons l'interface utilisateur Kendo pour Vue Form à partir du package '@progress/kendo-vue-form'. Il enveloppera et coordonnera la gestion de l'état du formulaire et de ses champs individuels : qu'ils soient touchés, modifiés, visités, valides ou qu'ils aient une valeur différente.
<k-form
@submit="handleSubmit">
Ensuite, nous inclurons un par un tous les composants de champ nécessaires. Chacun d'eux définit les accessoires qui sont transmis à l'éditeur et les événements de mise au point, de flou et de changement qui sont responsables des états importants liés au formulaire :
Champ de nom
Le champ de nom est généralement considéré comme le plus simple lors de la création d'un form—nous ajoutons simplement l'entrée stylisée habituelle, n'est-ce pas ? Pourtant, en réalité, ce n'est pas si facile. Afin de l'implémenter dans le formulaire, il doit avoir l'étiquette, l'indice et une validation appropriés afin que l'enfant ne le laisse pas accidentellement vide.
<field
:id="'nom'"
:nom="'nom'"
:label="'Nom'"
[19659030]:component="'myTemplate'"
:validator="nomValidateur"
>
<template v-slot:myTemplate="{ props }">
<forminput[1 9459015]
v-bind="props"
[ 53 ][1990]"props.onChange"
@blur="props.onBlur"[19659016 @focus="props.onFocus"
/>[194590
Date de naissance
Afin de choisir le cadeau le plus approprié, le Père Noël a également besoin de la date de naissance de l'enfant. Il peut être sélectionné par le composant DatePicker Kendo où l'année, le mois et le jour peuvent être sélectionnés de manière transparente par les enfants.
<field
:id="'dateOfBirth'"
:name="'dateOfB90
:label="'Date de naissance'"
[ 19659051]:hint="'Indice : C'est important pour le Père Noël.'"
:component="'myTemplate '"
:validator="dateOfBirthValidator"
[459021] :style="{ largeur : '90%', 'marge-droit' : '18px' }"[1 9459015]
>
<template v-slot:myTemplate]= "{ props }">
<formdatepicker
v-bind="props"
@change="props.onChange"
@blur="props.onBlur"
] ="props.onFocus"
>
Age field
Le composant NumericTextBox Kendo correspond parfaitement lorsque nous devons renseigner l'âge, et la validation du formulaire peut être ajoutée de manière appropriée pour éviter également les valeurs négatives.
<field
:id="'age'"
[
19659051]:name="'âge'"
:label="'Âge'"
:format="'n0'"
[196590="'myTemplate'"
:validator="ageValidator"[19659016] >
<template v-slot:myTemplate="{ props }">
[
]
v-bind="props"
@change="props.onChange"
@blur="props.onBlur"
@focus="props.onFocus"
19 90
[196590][24][194590]
Pays
Choisir le pays aidera le Père Noël à préparer son programme de Noël le plus optimisé. Lorsqu'une collecte de telles données est nécessaire, nous avons souvent besoin d'un composant AutoComplete où nous pouvons taper la première lettre du pays, puis le trouver dans la liste filtrée. Nous pouvons ajouter le message de validation qui expliquera pourquoi ce champ est important pour le Père Noël.
<field
:id="'countryselected' "
:name="'countryselected'"
:label="'Pays'"
:hint="'Indice : Vos pays'"
:component="'myTemplate'"
:dataItems="pays"
:validator="requiredValidator"[1945]
>
<template v-slot:myTemplate="{ props }">
[196590formautocomplete
v-bind="props"
[19459026@change="props.onChange"
@blur="props.onBlur"
@focus="props.onFocus"
90
[194590]
Veuillez partager le numéro de téléphone de votre mère ou de votre père (en cas de problème).
En ces temps modernes, le téléphone d'un parent est extrêmement important si quelque chose ne va pas avec la livraison de Noël. Le meilleur choix pour remplir le numéro est la MaskedTextbox, qui vous aidera à remplir visuellement le masque des numéros corrects.
<field
[19659030]:id="'parentsNumber'"
:name="'parentsNumber'"
:label="`Numéro de téléphone de maman ou de papa`"
19659030]:mask="'(999) 000-00-00-00'"
:hint=" 'Astuce : Nous pourrions les appeler si nous avons des questions.'"
:component="'myTemplate'"
:validator="phoneValidator"
>
<template v-slot:myTemplate="{ props }">
<formmaskedtextbox
v-bind="props"
@change="props.onChange"
@blur="props.onBlur"
[ [1965]"props.onFocus"
>
[ 19459026] 19659030]
A partir de là, les questions deviennent plus sérieuses. Ils concernent tous le comportement des enfants tout au long de l'année : étaient-ils bons ou mauvais ? Après tout, le Père Noël a besoin de savoir s'il s'est bien comporté toute l'année.
À quel point étiez-vous bon tout au long de l'année, de 1 à 10 ?
C'est le moment où les enfants doivent être vraiment honnêtes et terminer un sur le terrain à quel point ils ont été bons tout au long de l'année. L'éditeur de formulaire le plus intuitif pour de tels besoins est le Slider qui peut afficher visuellement les options de nombre et les valeurs minimales et maximales pouvant être sélectionnées.
<field
[
<field
:id="'être bon'"
:name="'être bon' "
:label="'Vous avez passé l'année 1 à 10 ?'"
:component="'myTemplate'"
: "min"
:max="max"
:data-items="sliderData"
[1 9459025] >
<template v-slot:myTemplate="{ props }">
<formslider
bin 53 [1965]"props"
@change="props.onChange"
@blur="props.onBlur"
@propos.
>
[453390][9030
Combien de bonnes et de mauvaises actions avez-vous accomplies tout au long de l'année ?
Avec de simples NumericTextBoxesnous pouvons laisser les enfants dire au Père Noël combien de bonnes et de mauvaises actions ils ont faites tout au long de l'année .
<field
:id="'goodDeeds'"
:name="'goodDeeds'"
:label="''Good Deeds year'"
:format="'n0'"
:component="'myTemplate'"
:validator="90
>
<template v-slot:myTemplate="{ props }">
<formnumerictextbox
[21] [v65]-90
@change="props.onChange"
19659102]@blur="props.onBlur"
@focus="props.onFocus"[459024] ]
>
Quel est le délai de livraison le plus approprié pour vous ?
Pour vous aider encore plus, nous pouvons choisir le meilleur moment pour faire livrer le cadeau. Ici, l'aide vient du composant DateTimePicker qui nous permet de choisir le jour, l'heure et la minute les plus appropriés où le Père Noël et ses rennes seront les bienvenus sur le toit de l'enfant.
<field
:id="'deliveryTime'"
:name=[19659021]"'deliveryTime'"
:label="''Date et heure de livraison'"
:hint="'Astuce : sélectionnez la date et l'heure pour recevoir votre cadeau'"
:component="'myTemplate'"
:validator="requiredValidator][[199090]
>
<template v-slot:myTemplate="{ props }">
<formdatetimepicker
v-bin"d
@change="props.onChange"
19659386]@blur="props.onBlur"
@focus="props.onFocus"[45159024][199024] ]
>
[194590]15
Avez-vous écouté vos parents ?
Enfin, les enfants doivent confirmer qu'ils ont écouté leurs parents avant de soumettre le formulaire. Il est indispensable de pouvoir envoyer le formulaire au serveur au pôle Nord.
<field
:id="' listenedToParents'"
:name="'listenedToParents'"
:label="'Avez-vous écouté vos parents toute l'année ?'"
:component= "'myTemplate'"
:validator="listenedToParentsValidator"[196590 >
<template v-slot:myTemplate="{ props }"[1965902] >
<pour mcheckbox
v-bind="props"
[1945]25][19459026@change="props.onChange"
@blur="props.onBlur][19459024"[19459024
@focus="props.onFocus"
[454190][19659020]
Après avoir préparé tous ces champs, le formulaire est entièrement accessible et prêt à l'emploi. Le code et un exemple exécutable sont tous deux disponibles dans cet exemple StackBlitz.
J'espère que ces informations vous aideront également lorsque vous aurez besoin d'un formulaire Vue 2 ou Vue 3. Pour plus de conseils ou de blogs Vue similaires, vous pouvez me suivre sur Twitter—@pa4oZdravkov.
Joyeux Noël et joyeux codage Vue pour la nouvelle année !
Source link