Explication détaillée de la fonction normalizeClass dans Vue3 : application de la méthode de rendu flexible des noms de classe

Dans Vue3, afin d'utiliser plus facilement le nom de classe dans le modèle de composant, une nouvelle fonction normalizeClass est fournie, qui peut générer une chaîne de nom de classe standardisée basée sur le tableau ou l'objet entrant.

La fonction normalizeClass rend non seulement le rendu des noms de classe plus flexible, mais nous aide également à mieux organiser et gérer les noms de classe, facilitant ainsi la maintenance des styles de composants.

Ensuite, examinons de plus près les scénarios d'utilisation et d'application de la fonction normalizeClass.

1. Utilisation de base de la fonction normalizeClass

La fonction normalizeClass prend en charge deux paramètres. Le premier paramètre peut être un tableau ou un objet, et le deuxième paramètre peut être un paramètre facultatif utilisé pour spécifier le nom de classe par défaut.

1. Tableau en tant que paramètre

Lorsque nous transmettons un tableau, la fonction normalizeClass traitera chaque élément du tableau comme un nom de classe et concatènera ces noms de classe dans une chaîne séparée par des espaces.

Par exemple, nous avons un tableau styles, qui contient trois noms de classe, à savoir « big », « blue » et « bold ». Si nous voulons séparer ces noms de classe par des espaces et les regrouper en un nom de classe entier, nous pouvons utiliser la fonction normalizeClass. Le code est le suivant :

<template>
  <div :class="normalizeClass(styles)"></div>
</template>

<script>
  export default {
    data() {
      return {
        styles: ['big', 'blue', 'bold']
      }
    }
  }
</script>

De cette façon, Vue3 fusionnera les trois noms de classe dans le tableau de styles. en un La chaîne de style est ensuite rendue sur l'élément du modèle.

2. Objet en tant que paramètre

Lorsque nous transmettons un objet, la fonction normalizeClass générera une chaîne de nom de classe basée sur la valeur d'attribut et le nom d'attribut de l'objet.

La valeur d'attribut d'un objet est généralement une valeur booléenne. Lorsque la valeur est vraie, cela signifie que le nom de classe correspondant prendra effet, et lorsqu'il est faux, il ne prendra pas effet.

Par exemple, nous avons un style d'objet, qui contient trois attributs grand, bleu et gras, et les valeurs d'attribut sont respectivement vraies et fausses. Si nous voulons déterminer quels noms de classe afficher en fonction des valeurs d'attribut, nous pouvons utiliser la fonction normalizeClass. Le code est le suivant :

<template>
  <div :class="normalizeClass(styles)"></div>
</template>

<script>
  export default {
    data() {
      return {
        styles: {
          big: true,
          blue: false,
          bold: true
        }
      }
    }
  }
</script>

Lorsque nous utilisons la fonction normalizeClass comme celle-ci, Vue3 changera en gros et en gras en fonction de l'attribut. valeurs des styles d'objet. Les noms de classe sont concaténés dans une chaîne et rendus à l'élément dans le modèle.

3. Spécifier les noms de classe par défaut

Dans certains cas, nous souhaitons ajouter des noms de classe par défaut à la chaîne de nom de classe lors de sa génération. À ce stade, nous pouvons utiliser le deuxième paramètre de la fonction normalizeClass. Le code est le suivant :

<template>
  <div :class="normalizeClass(styles, 'container')"></div>
</template>

<script>
  export default {
    data() {
      return {
        styles: ['big', 'blue', 'bold']
      }
    }
  }
</script>

De cette façon, lorsque nous utilisons la fonction normalizeClass pour générer une chaîne de nom de classe, la chaîne de nom de classe sera épissée. avec le nom de classe par défaut « conteneur » dans une chaîne de style, puis rendu à l'élément du modèle.

2. Utilisation avancée de la fonction normalizeClass

En plus de l'utilisation de base, la fonction normalizeClass a également une utilisation avancée, ce qui nous permet d'organiser et de gérer les noms de classe de manière plus flexible.

1. Passer une fonction en tant que paramètre

Lorsque nous devons générer dynamiquement un nom de classe basé sur certaines conditions dynamiques, nous pouvons transmettre une fonction en tant que paramètre de la fonction normalizeClass.

Cette fonction reçoit un objet contextuel, qui contient l'instance actuelle du composant, les accessoires du composant, les données du composant et d'autres données. Nous pouvons générer dynamiquement des noms de classe basés sur ces données.

Par exemple, nous avons un composant Checkbox, qui a un attribut coché, qui est utilisé pour spécifier s'il est coché. Nous voulons lui ajouter un nom de classe « coché » lorsqu'il est coché. Nous pouvons l'implémenter comme ceci :

<template>
  <label :class="normalizeClass({ 'checked': isChecked })">
    <input type="checkbox" v-model="isChecked">
    {{ label }}
  </label>
</template>

<script>
  export default {
    props: {
      label: String,
      checked: Boolean
    },
    data() {
      return {
        isChecked: this.checked
      }
    },
    watch: {
      checked(value) {
        this.isChecked = value
      }
    },
    methods: {
      normalizeClass(context) {
        return context.props.checked ? ['checked'] : []
      }
    }
  }
</script>

De cette façon, lorsque l'attribut vérifié dans props est vrai, la fonction normalizeClass renverra un tableau contenant le nom de la classe 'vérifiée', sinon elle renverra un tableau vide, gérant ainsi dynamiquement le nom de classe.

2. Passer un objet en tant que paramètre

Lorsque nous devons générer dynamiquement un nom de classe basé sur certains objets, nous pouvons transmettre un objet en tant que paramètre de la fonction normalizeClass.

Cet objet peut être composé de plusieurs attributs. La valeur de chaque attribut peut être une valeur booléenne, qui est vraie lorsque les conditions sont remplies et fausse lorsque les conditions ne sont pas remplies. La fonction normalizeClass décidera d'ajouter ou non le nom de classe correspondant à l'attribut en fonction de la valeur de ces attributs, gérant ainsi dynamiquement le nom de classe.

Par exemple, nous avons un composant Badge, qui a un nombre d'attributs, indiquant la quantité. Lorsque la quantité est 0, nous voulons lui ajouter un nom de classe « aucun », qui est utilisé pour masquer l'élément. Nous pouvons l'implémenter comme ceci :

<template>
  <div :class="normalizeClass({ 'none': count === 0, 'has-count': count > 0 })">
    <div class="badge-count">{{ count }}</div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    props: {
      count: Number
    },
    methods: {
      normalizeClass(context) {
        const classList = []
        for (const key in context.props) {
          if (context.props.hasOwnProperty(key) && context.props[key]) {
            classList.push(key)
          }
        }
        return classList
      }
    }
  }
</script>

De cette façon, lorsque l'attribut count dans props est 0, la fonction normalizeClass renverra un tableau contenant le nom de la classe 'none', sinon elle renverra un tableau contenant le 'has-count' ' nom de classe. Gérant ainsi dynamiquement les noms de classe.

Résumé : La fonction

normalizeClass est l'une des fonctions intégrées du framework Vue3. Elle peut générer une chaîne de nom de classe standardisée basée sur un tableau ou un objet, nous aidant à mieux organiser et gérer les styles de composants. Dans le développement réel, nous pouvons générer dynamiquement des noms de classe en fonction de certaines conditions dynamiques, ou décider d'ajouter ou non certains noms de classe en fonction de certains objets, obtenant ainsi une gestion de style plus flexible.

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!