15 directives Vue indispensables pour maximiser votre productivité

Inspiré d’AngularJS, Vue est livré avec des directives intégrées (telles que v-html ou v-once ) que vous trouverez utiles, chacune ayant son propre cas d’utilisation. Vous pouvez trouver la liste complète des directives intégrées ici .

Mais ce qui est encore plus fantastique, c’est que vous pouvez également écrire vos propres directives. Cela a permis à la communauté Vue.js de résoudre d'innombrables problèmes de code qu'elle pouvait ensuite publier sous forme de packages.

Voici une liste de mes directives personnalisées préférées de Vue.js. Inutile de dire que c’est incroyable le temps qu’ils m’ont économisé sur mes projets. ?

1. V-Hotkey

Repository : v-hotkey
Démo : disponible ici
Installation : npm installer --save v-hotkey

Cette directive vous permet de lier un ou plusieurs raccourcis clavier à vos composants. Avez-vous besoin de masquer un composant lorsque vous appuyez sur la touche Échap et de l'afficher lorsque vous appuyez sur Entrée tout en appuyant sur Ctrl? Easy Peasy:

2. V-Click-Outside

Dépôt : v-click-outside
Démo : disponible ici
Installation : npm install --save v-click-outside

Voulez-vous fermer un composant lorsqu'un clic se produit à l'extérieur? Cela peut être fait en un clin d'œil avec cette directive. C'est parmi ceux que j'utilise dans chacun de mes projets. Il est très utile dans les menus contextuels ou déroulants.

 < template > 
   < div 
     v-show  =  " show  " 
     v-click-outside  = "  onClickOutside  "
  > 
     Cachez-moi lorsqu'un clic se produit à l'extérieur de cet élément
   </  div > 
 </  template > 

 < script > 
 export   default   {
   données  () 19659034] {
     retour   {
      spectacle :   vrai 
    } ; 
  } 

  methods :   {
     onClickOutside  ()   {
       ceci .  show  =   false ; 19659042]} 
  } 
} ; 
 < /  script > 

Remarque: Vous pouvez également choisir de déclencher la méthode uniquement double-cliquez à l'extérieur se produit. Rendez-vous sur la documentation pour en savoir plus sur cette fonctionnalité.

3. V-Clipboard

Repository : v-clipboard
Installation : npm install --save v-clipboard

Yev Vlasenko fait cette directive simple que vous pouvez ajouter à tout élément statique ou dynamique de votre code. Ensuite, lorsque l’on clique sur l’élément, la valeur de la directive est copiée dans le Presse-papiers de l’utilisateur. Cela peut être utile lorsque vous souhaitez fournir à vos clients un extrait de code qu'ils doivent copier quelque part.

 < button   v-clipboard  =  " value  ] ""  > 
   Copier dans le presse-papier
 </  button > 

Repository : vue-scrollto
Démo : disponible ici
Installation : . ] npm install --save vue-scrollto

Cette directive écoute un événement de clic sur l'élément et fait défiler jusqu'à une balise donnée. Je l'utilise principalement lorsque je traite une table des matières dans un article ou dans des en-têtes de navigation.

 < span   v-scroll-to  =  " {
  el:  ' #element ' // L'élément que vous souhaitez faire défiler.
  conteneur:  ' #container ' // Le conteneur à faire défiler.
  duration: 500, // La durée (en millisecondes) de l'animation défilante.
  easing:  ' linear '  // L'atténuation à utiliser lors de l'animation.
  }  " 
> 
   Faites défiler jusqu'à #élément en cliquant ici
 </  span >  

Note: Vous pouvez également l'utiliser à l'aide d'un programme. Consultez la documentation pour en savoir plus sur cette fonctionnalité

5. Vue-Lazyload

Repository : vue-lazyload
Démo : disponible ici
Installation : npm install --save vue-lazyload [1945911].

Si vous voulez charger vos images en paresseux pour accélérer vos pages, ce logiciel vous sera utile. Surtout quand sa mise en œuvre ne prend pas plus de 5 minutes.

 < img   v-lazy  =  " https://www.domain.com/image.jpg  " > 

Dépôt : v-tooltip
Démo : ici
Installation : npm install --save v-tooltip

Presque tous les projets ont besoin d’infobulle. Avec ce paquet, vous pouvez ajouter des éléments réactifs à vos éléments, contrôler leur position, choisir de les déclencher au clic ou en survol et écouter les événements.

 < button   v-tooltip  = [19659017] " ' Vous avez '  + comte +  ' nouveaux messages. ' "  >  

Note: Il existe un autre paquet populaire pour les info-bulles si vous avez besoin d'une alternative: vue-directive-tooltip .

Repository : v-scroll-lock [19659006] Démo : disponible ici
Installation : npm installer --save v-scroll-lock

Sur la base du body-scroll-lock cette directive vous aidera à empêcher le défilement du corps lorsqu’un modal est ouvert.

 < template > 
   < div   class  =  " modal "    v-if  =  " ouvert "  > 
      < bouton   @click  = [19659017] " onCloseModal "  >  X  </  bouton > 
      < div    =  " contenu modal "    v-scroll-lock  =  " ouvert "   ]> 
      < p >  Un tas de contenu modal défilable  </  p > 
      </  div > 
   </  div > 
 </  template > 

 < script > 
 export   default   {
   données   () 19659034] {
     retour   {
      ouvert :   false 
    } 
  } 
  methods :   {
     sur OpenModal   ()   {
       cette .  a ouvert  =   vrai 
    } [19659017]

    onCloseModal   ()   {
      ce .  a ouvert le périphérique  =   false 
    } 
  } 
 } 
 < /  script > 

8. V-Money

Dépôt : v-money
Démo : disponible ici
Installation : npm installer --save v-money

Lorsque vous avez besoin de préfixer / suffixer votre entrée avec une devise donnée, définissez le nombre de décimales qu'elle devrait avoir ou utilisez un séparateur décimal tel que “,” – ne cherchez pas plus loin! Cette directive le fera pour vous avec une simple ligne.

 < template > 
   < div > 
      < input   v-model.lazy  =  " prix "    v-money  =  " monnaie "  [  19659034] />  {{price}}
   </  div > 
 </  template > 

 < script > 
 export   default   {
   données   () 19659034] {
     retour   {
      prix :   123.45 
      argent :   {
        décimal :   ',' 
        milliers :   '.' 
        préfixe :   '$' 
        précision :   2 
      } 
    } 
  } 
} 
 < /  script > 

Repository : défilement vue-infini
Installation : npm installation --save vue-infinite-scroll

Si vous souhaitez charger de nouveaux éléments lorsque les utilisateurs accèdent à la page en bas, vous pourriez être intéressé par cette directive. En résumé, lorsque le bas de l'élément atteint le bas de la fenêtre, la méthode liée est déclenchée.

 < template > 
  
   < div 
     v-infinite-scroll  =  " onLoadMore "  
     infini-scroll-disabled  =  " occupé "  
     distance-scroll-distance infinie  =  " 10 " 
  >   </  div > 
 < template > 

 < script > 
 export   default   {
   données  () par  ] {
     retour   {
      données  [] 
      occupé :   false 
      nombre :   0 
    } 
  } 
 
  methods :   {
     surLoadMore  ()   {
       ceci .  occupé  =   vrai ; 19659282] setTimeout  ( ()   =>   {
         pour   ( var  i  =   0  ] j  =   10 ;  i  < j ;  i  ++ )   {
           ce .  données .  push  ( { nom :   ce .  nombre  ++  } ) ; 
        } 
         ceci .  busy  =   false ; 
      }  ]  1000 ) ; 
    } 
  } 
} 
 < /  script > 

10. Vue-Clampy

Dépôt : vue-clampy .
Installation : npm installer --save @ clampy-js / vue-clampy [19659002] Cette directive vous permet de tronquer le contenu d'un élément et d'ajouter des points de suspension à la fin. Il utilise clampy.js dans les coulisses.

   < p   v-clampy  =  " 3 "  >  Texte long à coller ici  </  p > 
  
 

11. Vue-InputMask

Repository : vue-inputmask
Installation : npm install --save vue-inputmask

Lorsque vous devez formater des dates dans un Cette directive basée sur la bibliothèque Inputmark vous permettra d’y ajouter un masque.

 < input   type  =  " ] texte  "   masque v  = "  ' 99/99/9999 '  "   / > 
 

12. Vue-Ripple-Directive

référentiel : vue-ripple-directive
Installation : npm installer --save vue-ripple-directive

Cette vue La directive personnalisée apportée par Aduardo Marcos vous fournit une jolie animation d'effet d'ondulation qui sera déclenchée lorsque les utilisateurs cliquent sur un élément. Je le trouve super pratique pour mes boutons d'action.

 < div   v-ripple   class  =  "Le bouton  est primaire " . >  Il s'agit d'un bouton  </  div > 
 

13. Vue-Focus

Dépôt : vue-focus
Installation : npm installer --save vue-focus

Parfois, lorsque quelqu'un fait quelque chose action sur votre interface, vous voulez qu'une entrée donnée soit ciblée. Cette directive concerne à peu près cela.

 < template > 
   < button   @click  =  " focalisé = true "  >  Activer l'entrée  </  > 

   < input   type  =  " texte "    v-focus  =  " mis au point  " > 
 </  template > 

 < script > 
 export   default   {
  data :   fonction  ()   {
     return   {
      focalisé :   false 
    } ; 
  } 
} ; 
 < /  script > 

14. V-Blur

Repository : v-blur
Démo : disponible ici
Installation : npm installer --save v-blur

Supposons que certaines parties de votre candidature soient floues lorsqu'un visiteur n'est pas enregistré. Vous pouvez le faire en un clin d'œil avec cette directive et personnaliser l'opacité, le filtre flou et la transition entre les deux états.

 < template > 
   < button 
     @ click  =  " blurConfig.isBlowed =! blurConfig.isBlowed " 
  >  Basculement de la visibilité du contenu  </  bouton > [196590128] ]

   < p   v-blur  =  " blurConfig "  >  Contenu flou  </  p > 
 </  template > 

 < script > 
   export   default   {
       données   () 19659034] {
         retour 
          blurConfig :   {
            isBlowed :   false 
            opacité :   0.3 
            filtre :   'Flou (1.2px)' 
            transition :   'all .3s linear' 
          } 
        } 
      } 
    } 
  } ; 
 < /  script > 

15. Vue-Dummy

Repository : vue-dummy
Démo : disponible ici
Installation : la commande installer --save vue-dummy [1945911].

Lors du développement d'une application, vous devrez éventuellement utiliser du texte factice lorem ipsum ou ajouter des images de remplacement d'une certaine taille quelque part. Vous pouvez facilement le faire avec cette directive.

 < template > 
  
   < p   v-dummy  =  " 150 "  >   </  p [19659017]> 

  
   < img   v-dummy  =  " ' 400x300 ' "    /> 
 </  modèle > 
 

Conclusion

Ce sont mes 15 directives Vue.js préférées. Pensez-vous qu'il y en a un qui mérite d'être sur cette liste? N'hésitez pas à me le dire dans les commentaires ou à me contacter sur Twitter @RifkiNada .