AccueilActualitésLogicielsComment créer des raccourcis claviers très simplement avec Vue.js ? Logiciels Comment créer des raccourcis claviers très simplement avec Vue.js ? Publié le 27/07/2017 Partager cet article : Partager sur Facebook Partager sur Twitter Partager sur Linkedin Share on pinterest Aujourd'hui je vous propose de découvrir un petit composant faisant la liaison entre la bibliothèque de gestion de raccourcis-claviers mousetrap et Vue js Mousetrap en quelques mots Mousetrap est une bibliothèque js permettant une gestion avancée des événements claviers en Javascript. Le but de cette library est simple : lier un ou plusieurs raccourcis claviers (que ce soit des appuis simples, combinaisons ou séquences de touches) à une fonction. Une fois la liaison faite, la fonction sera appelé à chaque fois que le raccourci-clavier est exécuté. L'exemple suivant par exemple exécute quelque chose si vous appuyez sur ctrl+c, puis sur a et t. Mousetrap.bind("ctrl+c a t", function(e) { makeSomething() }); Vue.js Je vais essayer de faire court sur ce sujet qui mériterais bien un article à lui tout seul, et qui en aura un très rapidement, excusez-moi donc pour le manque de precision. Vue est un framework Javascript permettant de créer des applications web riches en nous donnant la possibilité de créer des liaisons entre notre affichage et nos données, ainsi qu'en nous permettant de créer des "composants" grace aux HTML5 Customs Éléments. Si vous avez déjà entendu parler d'Angular ou de React, dites-vous que nous sommes ici sur un produit équivalant d'un point de vue fonctionnalités et fonctionnement global. En mieux. Créer un component Mousetrap Dans une application Web, les raccourcis claviers sont souvent dependant des écrans affiches à un instant t. Comment fait pour pouvoir les gérer simplement ? Doit-on les déclarer à la création d'un element et les retirer lors de sa destruction ? Et où doit-on les déclarer ? Pour résoudre toutes ces questions lors de mon projet actuel, j'ai décidé de faire un composant vu js permettant de déclarer extrêmement simplement mes raccourcis claviers. Notez que les raccourcis claviers sont appelles lors d'événements liés au cycle de vie de mon composant et que ces derniers sont appelés aussi avec l'utilisation de v if. Vous pouvez donc "afficher" ou masquer les raccourcis claviers exactement comme s'il s'agissait de simples éléments graphiques ! Avec ce composant, il vous est donc possible d'ajouter des raccourcis claviers à vos applications très simplement, sans à avoir à penser à nettoyer vos bindings derrière vous ! Les raccourcis claviers se créent et se détruisent seuls en fonction des états d'affichage de votre application. See the Pen Mousetrap + Vue.js by Benjamin SANCHEZ (@B_Sanchez) on CodePen. By Benjamin Sanchez Laisser un commentaire Annuler la réponseVotre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *Comment Nom * E-mail* Site web Enregistrer mon nom, mon e-mail et mon site dans le navigateur pour mon prochain commentaire.