javascript - Bagaimana untuk mendapatkan ketinggian komponen itu sendiri dalam vue

Question

Untuk membuat kotak timbul dengan ketinggian berubah-ubah, ia perlu diposisikan Kotak timbul mungkin timbul di bahagian bawah atau di kepala, tetapi kerana kandungannya berubah-ubah, ketinggiannya perlu dikira untuk ditunjukkan. sama ada ia muncul ke atas atau ke bawah , pada masa ini cara mendapatkan ketinggiannya dalam komponen
Pendekatan semasa saya ialah menggunakan classname dalam created() untuk mendapatkan p komponen. . Walau bagaimanapun, memandangkan nilai awal dalam data( ) lalai ketinggian komponen kepada 0 dan menukar ketinggian dalam data() dalam dicipta, tetapi tidak mendapat pcreated()中使用classname得到组件的p但由于初始在data()中将组件高度默认了0,
在created中改变data()

dicipta() {

let cur = document.querySelectorAll("p[class='Pop-Over']");
console.log(cur);
let curHeight = cur.height;
console.log(curHeight);
}

Hasil cetakan curHeight tidak dapat ditentukan, sila cari penyelesaian

Answer 1

elemen.offsetHeight
// Dalam vue, sila gunakan ref untuk mendapatkan DOM sebenar
// Dipanggil dalam cangkuk yang dipasang, yang dicetuskan selepas DOM diberikan

Answer 2

mounted () {
    this.$nextTick(() => {
        let cur = document.querySelectorAll("p[class='Pop-Over']");
        console.log(cur);
        let curHeight = cur.height;
        console.log(curHeight);
    })
}

Answer 3

dicipta cangkuk Nod dom belum dimasukkan ke dalam halaman lagi. Ia perlu dipanggil dalam fungsi cangkuk yang dipasang
Dan untuk mendapatkan ketinggian elemen, gunakan dom.clientHeight, atau dom.getBoundingClientRect().height

.

Answer 4

@林小信 Memandangkan saya menggunakan v-if semasa membuat panggilan, ia akan dibuat setiap kali ia ditetapkan kepada benar, jadi ia boleh diletakkan di dalam create, tetapi anda juga memberitahu saya tentang nextTick ia cara anda.
Pada masa ini, kerana lapisan paling luar p tidak mempunyai ketinggian, ia hanya boleh diperolehi dengan menambah ketinggian sub-p untuk menjadi ketinggiannya. Mungkin saya tidak mengambil kira perkara ini semasa menulis komponen.

ini.$nextTick(() => {

      let cur = document.querySelectorAll("p[class='Pop-Over']");

// console.log(cur);

      let curHeight = 0;
      cur[0].childNodes.forEach(function (item, index, array) {

// console.log(typeof item.clientHeight);

        curHeight += (typeof item.clientHeight) === 'number' ? item.clientHeight : 0;
      });
      });
          

Jika tiada jawapan yang lebih baik, saya akan menerima jawapan anda

Answer 5

Dapatkan saiz sebenar .clientWidth dan .clientHeight
Tiada kaedah pemerolehan seperti .height, jadi ia tidak ditentukan