Conseils pour utiliser le CSS étendu pour obtenir une isolation du style de composant dans Vue

Conseils pour utiliser le CSS étendu pour obtenir une isolation du style de composant dans Vue

Vue est un framework JavaScript populaire, et sa structure composée de composants accélère l'efficacité du développement front-end. Dans le même temps, à mesure que la taille de l’application augmente, la maintenance des styles devient plus difficile. Dans ce cas, Vue fournit une technologie simple mais puissante appelée scoped CSS qui peut nous aider à isoler le style des composants. Dans cet article, nous explorerons comment utiliser la technologie CSS étendue pour obtenir une isolation de style des composants.

Scoped CSS Introduction

Dans Vue, nous pouvons utiliser le sélecteur CSS de niveau 3 pour développer des styles pour les composants. Comme indiqué ci-dessous :

<template>
  <div class="my-component">
    <p>Component content</p>
  </div>
</template>

<style>
.my-component p {
  color: red;
}
</style>

Ce code crée un composant nommé my-component et utilise un sélecteur CSS de niveau 3 dans le composant. Les styles ne sont appliqués qu'aux éléments

au sein d'un élément .my-component, une technique appelée définition de style. À mesure que le nombre de composants augmente, cela peut entraîner des conflits de style, dans lesquels deux composants ont le même type CSS, entraînant des problèmes d'affichage potentiels. Pour résoudre ce problème, Vue fournit un mot-clé appelé scoped qui peut limiter les styles à la portée du composant. Comme indiqué ci-dessous :

<template>
  <div class="my-component">
    <p>Component content</p>
  </div>
</template>

<style scoped>
p {
  color: red;
}
</style>

Dans cet exemple, le style est uniquement appliqué à l'élément

Note

• scoped CSS n'est pas une nouvelle technologie, mais une application sur Vue.
• scoped CSS utilise des pseudo-balises, telles que scoped, qui ne peuvent être appliquées qu'aux balises de style.
• scoped CSS est implémenté en ajoutant une balise pseudo-classe à chaque élément appliqué. Vous pouvez limiter la portée du style en ajoutant cette balise, que le même élément soit utilisé ou non dans plusieurs composants.

exemple de code CSS scoped

Pour démontrer la technique CSS scoped, nous allons créer un exemple contenant deux composants. Chaque composant contiendra des styles différents.

Tout d'abord, nous allons créer le premier composant qui stylisera un formulaire avec un bouton. Dans ce composant, le bouton sera marqué en rouge, avec un fond noir et une bordure en gras.

<template>
  <div>
    <h3>Component 1</h3>
    <form class="my-form">
      <button class="my-button">Submit</button>
    </form>
  </div>
</template>

<style scoped>
.my-form button {
  background-color: black;
}

.my-form .my-button {
  color: red;
  background-color: white;
  border: 2px solid black;
  font-weight: bold;
}
</style>

Ensuite, nous créons un deuxième composant, qui contiendra une zone de saisie et une barre de progression avec un curseur. Dans ce composant, la barre de progression sera marquée en vert et la zone de saisie de texte sera définie en gris.

<template>
  <div>
    <h3>Component 2</h3>
    <div class="progress">
      <input type="text" class="input-text">
      <div class="slider"></div>
    </div>
  </div>
</template>

<style scoped>
.input-text {
  color: gray;
}

.progress .slider {
  background-color: green;
  height: 10px;
  width: 50%;
}
</style>

Dans cet exemple de code, nous utilisons la technologie CSS étendue pour garantir que le style de chaque composant n'affecte pas les autres composants. Cela garantira que chaque composant contient uniquement ses styles pertinents et n'est pas affecté par d'autres composants.

Résumé

Dans cet article, nous avons discuté de la technologie CSS étendue dans Vue. Cela nous permet de définir les styles au sein d'un composant pour éviter les conflits de style entre les différents composants. Utilisez les conseils de cet article pour implémenter l'isolation des styles de composants dans votre prochain projet Vue. Cela rendra votre code plus modulaire et maintenable.

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!