一.問題描述

在使用Vue2開發(fā)移動(dòng)端頁面的時(shí)候，需要做一個(gè)效果，實(shí)現(xiàn)的方案是背景漸變，但是想要實(shí)現(xiàn)這個(gè)效果就必須進(jìn)行定位，然后設(shè)置z-index讓這個(gè)元素在其他元素的下面，我的背景高度需要在一個(gè)十分恰當(dāng)?shù)奈恢茫谶@個(gè)背景上面還有另外一張圖片，但是我的圖片會(huì)隨著移動(dòng)端頁面的變化而發(fā)生高度的變化，為什么會(huì)變化哪？因?yàn)槲以O(shè)置了圖片的寬度為100%這樣就有可能導(dǎo)致，背景的位置在寬屏的情況下和UI差距比較大，所以我需要獲取圖片的高度，然后在這個(gè)高度上增加合適的高度就可以在任何屏幕中自適應(yīng)，但是無論我在mounted中如何獲取，甚至在$nextTick中獲取到的圖片高度都是0，導(dǎo)致一直無法實(shí)現(xiàn)自己想要的效果，以上描述的效果基本如下：

二.問題分析

出現(xiàn)這個(gè)問題的點(diǎn)在于，進(jìn)行背景設(shè)置的元素，是定位的，所以脫離了標(biāo)準(zhǔn)流，導(dǎo)致它的高度無法被撐起來，并且也不能撐起來，因?yàn)樗母叨仁且粋€(gè)比較特殊的高度，所以只能進(jìn)行定位，但是又因?yàn)閳D片的高度變化，導(dǎo)致背景一個(gè)固定的值不能滿足要求，解決方案是動(dòng)態(tài)獲取圖片的高度然后相應(yīng)的去設(shè)置背景元素的高度，比較坑的地方就在于直接在mounted和$nextTick中拿不到高度，原因在于圖片未加載完成，所以需要在圖片完全加載后進(jìn)行后續(xù)的處理。

三.問題解決

解決方案一： 使用JS的方式進(jìn)行獲取圖片高度，在圖片高度的基礎(chǔ)上動(dòng)態(tài)設(shè)置背景高度。

methods: {
  handleImageLoad(event) {
    const height = event.target.offsetHeight;
    this.height1 = height + 120;
  },

  getPicHeight() {
    this.height1 = this.$refs.myPictrue.offsetHeight + 120;
  },
},

  mounted() {
    window.addEventListener("resize", () => {
      this.getPicHeight();
    });
  },

  beforeDestroy() {
    window.removeEventListener("resize", this.getPicHeight);
  },

解決這個(gè)問題的方法就是使用 @load="handleImageLoad"當(dāng)圖片加載完畢之后就會(huì)直接出發(fā)這個(gè)方法中的邏輯進(jìn)行處理，然后獲取高度來讓背景跟隨圖片高度進(jìn)行變化。

解決方案二： 手動(dòng)計(jì)算圖片比例，使用vw進(jìn)行動(dòng)態(tài)計(jì)算。

.img {
  width: 100vw;
  height: 40vw;
  position: relative;
  z-index: 9;
  background-color: red;
}
.img-bg {
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(40vw + 120px);
  background-color: green;
}

四.問題總結(jié)

這個(gè)問題其實(shí)本質(zhì)原因還是對不同內(nèi)容加載完成時(shí)機(jī)不夠清楚，因?yàn)樵陂_發(fā)過程中有時(shí)候確實(shí)不太會(huì)去考慮拿到圖片的高度，但是其實(shí)使用vw來解決這個(gè)問題其實(shí)是更好的，它的缺點(diǎn)在于需要自己去計(jì)算寬高比，但是本著不寫代碼就不會(huì)有bug的原則，能夠盡量使用純CSS解決的問題就用純CSS來解決。

到此這篇關(guān)于Vue中獲取圖片高度的兩種方法的文章就介紹到這了,更多相關(guān)Vue中獲取圖片高度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論