快捷導(dǎo)航

Vue中獲取圖片高度的兩種方法

更新時(shí)間：2024年08月01日 09:28:10 作者：一溪風(fēng)月

在使用Vue2開(kāi)發(fā)移動(dòng)端頁(yè)面的時(shí)候,需要做一個(gè)效果,實(shí)現(xiàn)的方案是背景漸變,但是想要實(shí)現(xiàn)這個(gè)效果就必須進(jìn)行定位,我的背景高度需要在一個(gè)十分恰當(dāng)?shù)奈恢?但是我的圖片會(huì)隨著移動(dòng)端頁(yè)面的變化而發(fā)生高度的變化,為什么會(huì)變化？所以本文介紹了Vue中獲取圖片高度的方法

一.問(wèn)題描述

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

二.問(wèn)題分析

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

三.問(wèn)題解決

解決方案一： 使用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è)問(wèn)題的方法就是使用 @load="handleImageLoad"當(dāng)圖片加載完畢之后就會(huì)直接出發(fā)這個(gè)方法中的邏輯進(jìn)行處理，然后獲取高度來(lái)讓背景跟隨圖片高度進(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;
}

四.問(wèn)題總結(jié)

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

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

您可能感興趣的文章: