Passage de variables en CSS sur un composant Vue

Dans cet article, je vais partager avec vous le processus de découverte d'une des fonctionnalités peu communes de Vue.js, l'injection de variables CSS à partir du script du composant. Mettons-nous mal à la tête et apprenons un peu de Vue!

Alors. Il y a quelques jours, j'étais confronté à un défi intéressant au travail. Nécessité de transmettre certains attributs de style CSS dans mes balises

Allez-y, lancez-le dans votre navigateur, tada ~!

Test de réactivité

Bien, la théorie est vraiment intéressante, mais comment testons-nous réellement la réactivité des variables CSS?

Il existe deux façons de le faire avec ce que nous avons actuellement: monter le Bouton dans votre application et passez-le dans différents accessoires. [19659004Oudansunsoucidesimpliciténousallonsajouterunétatlocal data pour pouvoir le modifier dans les outils pour développeurs de Vue .

Ajoutez ceci à votre . bouton logique.

  données  ()   {
     return   {
      textColor :   "blue" 
    } ; 
  } 

Enfin, n'oubliez pas d'ajouter la propriété color à votre styles .

Bien, maintenant que tout est configuré - ouvrez votre navigateur et ouvrez l'application. Vous verrez que le texte de votre bouton est bleu comme prévu, puisque c'est ce que nous avons défini pour la première fois comme textColor dans notre état.

Passez maintenant à votre . Vue dev tools, et cliquez sur la propriété et changez-la en red ou votre couleur de choix. Vous verrez immédiatement que la couleur du texte du bouton change également.

Attendez, quoi? ?

À ce stade, vous êtes soit fasciné par les possibilités infinies de cette approche (enfin, peut-être pas sans fin - c’est une solution de niche pour une très petite poignée de problèmes), soit vous êtes complètement confus. ] Si vous faites partie du deuxième groupe et que vous pensez que tout ce gâchis aurait pu être résolu en : style ou : liaisons de classe vous êtes absolument droite. Toutes nos félicitations! Toutefois, comme je l'ai mentionné, il existe des scénarios SCSS très spécifiques dans lesquels cela commence à être pratique.

Exemple? Que diriez-vous de calculer la position d’un menu en fonction de la taille du menu et de la taille de l’icône interne?

  '- menu-position' :   (  (  19659017] ceci .  menuSize  *   2 )   -   ce .  iconSize )   /   -  2  )   +   'px' 

Vous pourriez également les utiliser pour effectuer des calculs CSS. (?)

 hauteur :   calc  ( var  ( - height )  *  10 ) [1945920]. 19659020]; 

Voici les codes et la boîte de cet article:)

{% codesandbox kxw2p2wjr%}

Conclusion

Franchement, cet effort était amusant à étudier et à appliquer à un projet réel, et je suis Bien sûr, je vais rencontrer un moment dans ma vie où je serai heureux d'avoir cet outil pratique à ma ceinture. Donc, sur cette note, j'espère au moins que vous avez été diverti [

Pour plus d'informations sur la création d'excellentes applications Web

Vous souhaitez en savoir plus sur la création d'excellentes applications Web? Tout commence avec Kendo UI - la bibliothèque complète de composants d'interface utilisateur qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.

En savoir plus sur le Kendo UI

Testez gratuitement le Kendo UI