vue mengira ketinggian halaman tersembunyi

Memandangkan halaman muka hadapan menjadi semakin kompleks, kita selalunya perlu menggunakan pelbagai teknik untuk mencapai beberapa keperluan yang kelihatan mudah. Sebagai contoh, kita perlu mengira ketinggian elemen tersembunyi pada halaman untuk pemprosesan seterusnya Apakah yang perlu kita lakukan pada masa ini? Jawapannya ialah menggunakan Vue untuk mengira ketinggian halaman tersembunyi.

Vue ialah rangka kerja bahagian hadapan yang membina sistem komponen responsif untuk membina antara muka web. Ia mengatur antara muka pengguna melalui model komponen paparan berasaskan data abstrak dan secara deklaratif mengikat DOM kepada contoh Vue yang mendasari melalui sintaks templat mudah. Vue juga menyediakan beberapa fungsi tambahan, seperti sifat yang dikira, pemerhati, komponen, dsb., yang boleh menyelesaikan banyak masalah dengan mudah dalam pembangunan bahagian hadapan, termasuk mengira ketinggian halaman tersembunyi.

Jadi, kita boleh mengira ketinggian halaman tersembunyi melalui sifat yang dikira. Berikut ialah contoh mudah:

<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>

Kod di atas melaksanakan komponen dengan butang "Tunjukkan Lagi". Secara lalai, kawasan kandungan memaparkan kandungan sehingga 200 piksel tinggi Apabila butang "Tunjukkan Lagi" diklik, kawasan kandungan mengembang untuk memaparkan semua kandungan. Kita perlu mengira ketinggian kandungan untuk pemprosesan seterusnya.

Dalam Vue, kita boleh menggunakan atribut yang dikira untuk mengira ketinggian elemen halaman. Dalam contoh ini, kami menggunakan ini.$refs.content.scrollHeight untuk mendapatkan ketinggian kawasan kandungan. $refs ialah sifat khas yang disediakan oleh Vue, digunakan untuk mendapatkan elemen DOM atau kejadian subkomponen di dalam komponen. Dalam kod, kami menggunakan ref="content" untuk mengenal pasti elemen DOM dalam kawasan kandungan, dan kemudian gunakan ini.$refs.content.scrollHeight dalam atribut yang dikira untuk mendapatkan ketinggian elemen. Perlu diingatkan bahawa harta yang dikira ini hanya dikira apabila kawasan kandungan dikembangkan.

Atribut terkira ini boleh melaksanakan banyak senario yang serupa, seperti mengira lebar elemen, mengira kedudukan elemen, dsb. Secara umum, sifat terkira Vue ialah alat yang sangat praktikal yang boleh meningkatkan kecekapan pembangunan kami dengan banyak.

Selain sifat yang dikira, Vue juga menyediakan banyak fungsi lain, seperti pemerhati, komponen, dll., yang boleh membantu kami membangunkan aplikasi bahagian hadapan yang kompleks dengan lebih mudah. Dalam pembangunan masa depan, kita harus menggunakan alat ini sebanyak mungkin untuk menyelesaikan tugas kita dengan lebih baik.

Atas ialah kandungan terperinci vue mengira ketinggian halaman tersembunyi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!