Comment vue pénètre dans le style des composants de l'interface utilisateur

Avec l'application généralisée du framework Vue, les développeurs accordent de plus en plus d'attention à la mise en œuvre et au traitement de divers détails du framework Vue, dont l'un est la façon de pénétrer les styles des composants de l'interface utilisateur. Cet article présentera comment Vue pénètre le style des composants de l'interface utilisateur.

1. Pourquoi avez-vous besoin de pénétrer dans les styles des composants de l'interface utilisateur ?

Dans le framework Vue, nous utilisons souvent des composants d'interface utilisateur pour compléter certaines interactions et éléments visuels courants. Cependant, comme le composant UI est un module encapsulé indépendant, sa feuille de style est également fermée, ce qui rend difficile la modification flexible de son style. Les situations courantes sont les suivantes :

(1) Le style par défaut du composant UI ne le fait pas. faites correspondre le style de la page. Modifiez le style pour répondre aux besoins de la page ;

(2) Le style du composant de l'interface utilisateur est trop simple et doit être personnalisé pour obtenir des effets visuels plus complexes ; Le composant de l'interface utilisateur nécessite une modification dynamique du style, telle que le survol, le focus, la désactivation, etc.

Afin de résoudre ces problèmes, nous devons pénétrer dans les styles des composants de l'interface utilisateur afin de réaliser une personnalisation du style et des changements dynamiques.

Utilisez l'emplacement de portée de Vue pour implémenter des styles qui pénètrent dans les composants de l'interface utilisateur

2. L'emplacement de portée (slot) de Vue est une méthode d'insertion de contenu dans un emplacement spécifié à l'intérieur d'un composant. Grâce aux emplacements de portée, nous pouvons accéder directement aux éléments DOM à l'intérieur du composant, obtenant ainsi des styles qui pénètrent dans les composants de l'interface utilisateur.

En prenant Element-UI comme exemple, nous montrerons comment modifier le style via les emplacements de portée.

Tout d'abord, nous introduisons la bibliothèque de composants Element-UI et créons un composant Button de base :

<template>
  <el-button type="primary">按钮</el-button>
</template>

Ensuite, nous transmettons le nœud de texte du bouton au composant parent via l'emplacement de portée et le personnalisons dans le style du composant parent :

<!-- Button.vue -->
<template>
  <el-button type="primary">
    <slot name="text">按钮</slot>
  </el-button>
</template>

<!-- Parent.vue -->
<template>
  <button is="el-button" type="primary">
    <template v-slot:text>
      <span class="button-text">自定义样式按钮</span>
    </template>
  </button>
</template>

<style scoped>
.button-text {
  font-size: 20px;
  color: #ff0000;
}
</style>

Dans le code ci-dessus, nous transmettons le nœud de texte du bouton au composant parent via l'emplacement de portée et utilisons la directive v-slot pour spécifier le texte du nom de l'emplacement. Dans le composant parent, nous convertissons l'élément bouton en composant Button d'Element-UI via l'attribut is et personnalisons le style dans l'emplacement pour obtenir la personnalisation et la pénétration du style.

Utilisez la pseudo-classe /deep/ pour implémenter des styles qui pénètrent dans les composants de l'interface utilisateur

3. En plus des emplacements de portée, nous pouvons également utiliser la pseudo-classe /deep/ de CSS pour implémenter des styles qui pénètrent dans les composants de l'interface utilisateur. La pseudo-classe /deep/ peut étendre la portée du style à l'intérieur du sous-composant, modifiant ainsi le style du sous-composant.

En prenant iView comme exemple, nous allons montrer comment utiliser la pseudo-classe /deep/ pour modifier le style.

Tout d'abord, nous introduisons la bibliothèque de composants iView et créons un composant Button de base :

<template>
  <Button>按钮</Button>
</template>

Ensuite, nous utilisons la pseudo-classe /deep/ et ses sélecteurs descendants pour modifier le style du composant Button :

<template>
  <Button>按钮</Button>
</template>

Dans ce qui précède code , nous utilisons la pseudo-classe /deep/ pour sélectionner l'élément .ivu-btn à l'intérieur du composant Button, et modifions sa couleur d'arrière-plan et la couleur de son texte via la feuille de style pour obtenir une personnalisation et une pénétration du style.

Il convient de noter que la pseudo-classe /deep/ appliquera le style à tous les éléments DOM du composant et que le modificateur scoped doit être ajouté à la feuille de style pour prendre effet.

Résumé

4. Dans le framework Vue, afin de résoudre les problèmes de personnalisation et de changements dynamiques des styles de composants d'interface utilisateur, nous pouvons obtenir des styles qui pénètrent dans les composants d'interface utilisateur via des emplacements de portée et des pseudo-classes /deep/. Ces méthodes nous permettent de modifier les styles des composants de l'interface utilisateur de manière plus flexible, obtenant ainsi de meilleurs effets visuels et interactifs.

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!