vue calcule la hauteur de la page cachée

À mesure que les pages frontales deviennent de plus en plus complexes, nous devons souvent utiliser diverses techniques pour répondre à des exigences apparemment simples. Par exemple, nous devons calculer la hauteur des éléments cachés sur la page pour un traitement ultérieur. Que devons-nous faire à ce moment-là ? La réponse est d'utiliser Vue pour calculer la hauteur de la page cachée.

Vue est un framework front-end qui construit un système de composants réactifs pour créer des interfaces Web. Il organise l'interface utilisateur via un modèle de composant de vue abstrait basé sur des données et lie de manière déclarative le DOM à l'instance Vue sous-jacente via une syntaxe de modèle simple. Vue fournit également certaines fonctions auxiliaires, telles que des propriétés calculées, des observateurs, des composants, etc., qui peuvent très facilement résoudre de nombreux problèmes de développement front-end, notamment le calcul de la hauteur de la page cachée.

Ainsi, nous pouvons calculer la hauteur de la page cachée grâce aux propriétés calculées. Voici un exemple simple :

<template>
  <div>
    <div class="content" ref="content">
      <p v-for="index in 10">这是第{{index}}段文字</p>
    </div>
    <div class="show-more" @click="showMore">{{showMoreText}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowMore: false,
      showMoreText: '显示更多'
    }
  },
  computed: {
    contentHeight() {
      // 获取内容区高度
      return this.$refs.content.scrollHeight + 'px'
    }
  },
  methods: {
    showMore() {
      this.isShowMore = !this.isShowMore
      if (this.isShowMore) {
        this.showMoreText = '收起'
      } else {
        this.showMoreText = '显示更多'
      }
    }
  }
}
</script>

<style>
.content {
  overflow: hidden;
  max-height: 200px;
  transition: max-height .3s ease;
}

.show-more {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  color: #fff;
  background: #f60;
  cursor: pointer;
}
</style>

Le code ci-dessus implémente un composant avec un bouton "Afficher plus". Par défaut, la zone de contenu affiche un contenu jusqu'à 200 pixels de haut. Lorsque vous cliquez sur le bouton « Afficher plus », la zone de contenu s'agrandit pour afficher tout le contenu. Nous devons calculer la hauteur du contenu pour un traitement ultérieur.

Dans Vue, nous pouvons utiliser l'attribut calculé pour calculer la hauteur des éléments de la page. Dans cet exemple, nous utilisons this.$refs.content.scrollHeight pour obtenir la hauteur de la zone de contenu. $refs est une propriété spéciale fournie par Vue, utilisée pour obtenir des éléments DOM ou des instances de sous-composants à l'intérieur du composant. Dans le code, nous utilisons ref="content" pour identifier l'élément DOM dans la zone de contenu, puis utilisons this.$refs.content.scrollHeight dans l'attribut calculé pour obtenir la hauteur de l'élément. Il convient de noter que cette propriété calculée n'est calculée que lorsque la zone de contenu est développée.

Cet attribut calculé peut implémenter de nombreux scénarios similaires, tels que le calcul de la largeur d'un élément, le calcul de la position d'un élément, etc. En général, les propriétés calculées de Vue sont un outil très pratique qui peut grandement améliorer notre efficacité de développement.

En plus des propriétés calculées, Vue fournit également de nombreuses autres fonctions, telles que des observateurs, des composants, etc., qui peuvent nous aider à développer plus facilement des applications frontales complexes. Dans les développements futurs, nous devrions utiliser ces outils autant que possible pour mieux accomplir nos tâches.

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!