javascript - Bagaimana untuk mendapatkan ketinggian komponen itu sendiri dalam vue
世界只因有你
世界只因有你 2017-06-26 10:58:50
0
5
1244

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

世界只因有你
世界只因有你

membalas semua(5)
给我你的怀抱

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

曾经蜡笔没有小新
mounted () {
    this.$nextTick(() => {
        let cur = document.querySelectorAll("p[class='Pop-Over']");
        console.log(cur);
        let curHeight = cur.height;
        console.log(curHeight);
    })
}
学霸

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

.
漂亮男人

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

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan