Comment gérer les événements du clavier à Vue?

La clé pour gérer les événements du clavier dans VUE est de se familiariser avec le mécanisme de liaison des événements et l'utilisation des événements DOM. Les pratiques communes incluent: 1. Utilisez les instructions @keyup ou @keydown pour lier la méthode et coopérer avec les modificateurs clés tels que .enter et .ctrl.s; 2. Utilisez Event.Key pour déterminer le type de clé dans la méthode pour obtenir une logique différente; 3. Ajoutez un écouteur global pour implémenter la fonction de clé de raccourci via Window.AddeventListener et supprimer l'écouteur avant que le composant ne soit désinstallé; Dans le même temps, vous devez prêter attention à des détails tels que l'élément Focus, l'unicité des clés en V-FOR et le comportement du clavier mobile.

Il est en fait assez simple de gérer les événements du clavier dans Vue. La clé est de connaître le mécanisme de liaison des événements de Vue et l'utilisation de base des événements DOM natifs. Vous pouvez y parvenir grâce à des instructions, à la liaison des méthodes ou à l'écoute globale. Voici quelques méthodes communes et pratiques.

Utilisez @keyup ou @keydown pour lier directement

C'est la manière la plus courante et la plus simple: utilisez la directive @keyup ou @keydown sur l'élément qui doit écouter la saisie du clavier et lier à une méthode.

Par exemple:

 <input type = "text" @ keyup.enter = "soumiseform" />

Dans l'exemple ci-dessus, lorsque l'utilisateur appuie sur la touche Entrée dans la zone d'entrée, la méthode submitForm sera déclenchée.

Conseils:

• .enter est un modificateur clé fourni par Vue, indiquant qu'il ne répond qu'à la touche Entrée.
• Vous pouvez également utiliser .esc , .tab , .space et d'autres modificateurs pour écouter d'autres clés spéciales.
• Si vous souhaitez écouter des combinaisons de clés, telles que Ctrl S, vous pouvez écrire de cette façon: @keyup.ctrl.s="saveData" .

Obtenez des informations clés dans la méthode

Si vous ne souhaitez pas utiliser de modificateurs ou que vous souhaitez juger le type de clé de manière plus flexible, vous pouvez le gérer directement dans la méthode.

Par exemple:

 <input type = "text" @ keyup = "handlekeyup" />

 Méthodes: {
  handlekeyup (événement) {
    if (event.key === 'Entrée') {
      this.submitform ();
    } else if (event.key === 'Escape') {
      this.ClearInput ();
    }
  }
}

Cette méthode convient aux situations où la logique différente doit être exécutée en fonction de différentes clés. Notez que event.key renvoie des chaînes, telles que 'Enter' , 'a' , 'ArrowUp' , etc., qui sont plus intuitives et faciles à lire.

Écoutez les événements de clavier à l'échelle mondiale (comme les touches de raccourci)

Parfois, vous devez écouter des événements de clavier à travers l'application, tels que la mise en œuvre de raccourcis mondiaux tels que Ctrl S Save. Pour le moment, vous pouvez ajouter un auditeur mondial au crochet du cycle de vie du composant.

Par exemple:

 monté () {
  window.addeventListener ('keydown', this.handleGlobalKeyDown);
},
avantunmount () {
  Window.RemoveEventListener ('Keydown', this.HandleGlobalKeyDown);
},
Méthodes: {
  handleglobalkeydown (événement) {
    if (event.ctrlkey && event.key === 'S') {
      event.PreventDefault (); // empêche le comportement de sauvegarde par défaut ce.savedata ();
    }
  }
}

N'oubliez pas de supprimer l'auditeur avant la désinstallation des composants, sinon cela peut provoquer des fuites de mémoire ou des déclencheurs répétés.

Notes et FAQ

• Les éléments à l'extérieur de la boîte d'entrée peuvent ne pas se concentrer automatiquement, de sorte que les événements du clavier ne peuvent pas être déclenchés. Si nécessaire, les éléments peuvent être focalisés via tabindex .
• Si vous liez les événements dans v-for , assurez-vous que chaque élément a une key unique et évitez de donner des exceptions.
• Pour les appareils mobiles, le comportement des claviers souples peut être légèrement différent et il est recommandé de tester les scénarios principaux.

Fondamentalement, c'est tout. Le système d'événements de Vue est très flexible et peut répondre à divers besoins en combinaison avec des objets d'événements natifs. Ce qui n'est pas compliqué mais facile à ignorer réside dans l'utilisation des modificateurs et la gestion du cycle de vie de la surveillance mondiale. Faire attention à ces détails peut créer des interactions de clavier stables et fiables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!