javascript - Bagaimana untuk mendapatkan ketinggian komponen itu sendiri dalam vue

Question

Memandangkan kita ingin membuat kotak pop timbul dengan ketinggian berubah, kita perlu meletakkannya Kotak pop timbul mungkin muncul di bahagian bawah atau di kepala, tetapi kerana kandungannya berubah, ketinggiannya perlu dikira kepada. tunjukkan sama ada ia muncul ke atas atau ke bawah Pada masa ini, bagaimana saya boleh mendapatkan ketinggiannya dalam satu komponen?

给我你的怀抱 · Answer

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

曾经蜡笔没有小新 · Answer

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

欧阳克 · Answer

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

@林小信 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

phpcn_u1582 · Answer

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