Comment transformer l'écran en carré en vue

Vue est un framework JavaScript populaire largement utilisé dans le développement d'applications Web. Lorsque nous développons des applications Web, nous devons généralement afficher différents types d'éléments sur la page, tels que des images, des boutons, des zones de texte, etc. Généralement, ces éléments sont affichés dans des cases rectangulaires et les développeurs peuvent souhaiter transformer ces cases rectangulaires en carrés pour de meilleurs effets visuels.

Dans Vue, si vous souhaitez convertir une boîte rectangulaire en carré, vous devez d'abord comprendre la relation entre la largeur et la hauteur de l'élément. Si la largeur et la hauteur d’un élément sont égales, alors c’est un carré. Par conséquent, nous devons coder pour que la largeur et la hauteur des éléments soient égales. Ci-dessous, nous expliquerons comment utiliser Vue pour obtenir cet effet.

Méthode 1 : Utilisez du CSS pur pour obtenir un carré

Vous pouvez définir un pseudo-élément comme espace réservé en CSS et utiliser l'élément Pseudo avant ou après pour vous assurer que tout, quelles que soient les images ou les zones de texte, peut être défini sur un carré immédiatement. L'exemple de code est le suivant :

<style>
  .square {
    position: relative;
    width: 300px;
    height: 0;
    padding-bottom: 100%; /* 1:1 Aspect Ratio */
  }
  .square::before {
    content: "";
    display: block;
    padding-top: 100%; /* Content Aspect Ratio */
  }
  .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>

<div class="square">
  <div class="content">Hello World!</div>
</div>

Notez que cette méthode ajoutera un pseudo-élément vide à l'élément. Bien que cet élément ait une légère surcharge en termes de performances, il nécessite un rendu supplémentaire et peut donc avoir un impact sur les performances.

Méthode 2 : utilisez les instructions Vue pour implémenter des carrés

Si vous souhaitez implémenter des carrés dans Vue, veuillez utiliser des instructions personnalisées. Les directives personnalisées sont un type de directive qui peut être utilisée pour ajouter des comportements et des propriétés spéciaux aux applications Vue.

Les étapes pour définir une directive sont les suivantes :

1. Dans une application Vue, définissez une directive globale :

Vue.directive('square', {
  inserted: function (el) {
    el.style.width = el.clientHeight + 'px'
  }
})

Notez que la fonction hook insérée est appelée lorsqu'un élément est inséré dans le DOM. Dans cet exemple, nous utilisons une simple fonction JavaScript pour définir la largeur d'un élément sur sa hauteur.

2. Dans l'élément qui doit être carré, utilisez la directive "v-square" pour ajouter cette directive :

<template>
  <div v-square>
    ...
  </div>
</template>

Dans cet exemple, nous ajoutons la directive "v-square" à l'élément div qui doit être au carré.

Désormais, lorsque la directive "v-square" est ajoutée à un élément, la largeur et la hauteur de l'élément peuvent être automatiquement définies sur la même valeur via la directive, obtenant ainsi un effet carré.

Méthode 3 : Utiliser JavaScript pour implémenter des carrés

Vue peut également implémenter des carrés via du code JavaScript. Dans cet exemple, nous utiliserons la fonction hook de cycle de vie « montée » pour calculer la hauteur et la largeur de l'élément et définir leurs valeurs à l'aide du code JavaScript.

export default {
  mounted() {
    let el = this.$el
    let height = el.clientHeight
    el.style.width = height + 'px'
  }
}

En utilisant la fonction montée, nous pouvons exécuter ce code lorsque l'instance Vue est montée dans le DOM. Dans cet exemple, nous utilisons la propriété clientHeight pour obtenir la hauteur de l'élément. Nous utilisons ensuite du code JavaScript pour définir la largeur de l'élément sur sa hauteur.

Quelle que soit la méthode que vous choisissez, vous pouvez facilement convertir une boîte rectangulaire en carré à l'aide de Vue. Vous pouvez choisir de l'implémenter en CSS à l'aide de pseudo-éléments, de l'implémenter à l'aide des directives Vue ou de calculer la hauteur et la largeur de l'élément via du code JavaScript. Ces méthodes peuvent toutes fournir des effets visuellement agréables à votre application Web.

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!