Vue全屏背景圖片設置

在Vue項目中，全屏背景圖片是一個常見的需求，可以通過下面幾個方面闡述如何實現。這篇文章將從以下方面對Vue全屏背景圖片設置進行詳細闡述。

一、預處理

在開始顯示全屏背景圖片之前，需要先進行一些預處理工作。首先，需要新建一個單獨的Vue組件，並在其中添加代碼，該代碼用於加載圖片並調整其尺寸。

 <template>
  <img :src="bgSrc" class="full-img" />
</template>

<script>
export default {
  data() {
    return {
      bgSrc: require('@/assets/bg.jpg')
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.resizeImage()
      window.addEventListener('resize', this.resizeImage)
    })
  },
  methods: {
    resizeImage() {
      const img = new Image()
      img.src = this.bgSrc
      img.onload = () => {
        const rate = img.width / img.height
        const screenRate = window.innerWidth / window.innerHeight
        const fullImg = document.querySelector('.full-img')
        if (rate < screenRate) {
          fullImg.style.width = 'auto'
          fullImg.style.height = '100%'
        } else {
          fullImg.style.width = '100%'
          fullImg.style.height = 'auto'
        }
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeImage)
  }
}
</script>

<style>
  .full-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
</style>

二、設置全屏背景圖片

在預處理工作完成後，可以開始設置全屏背景圖片。首先，在App.vue文件中添加全屏背景圖片的容器，並且將前面創建的組件添加到該容器中。

<template>
  <div id="app">
    <div class="full-page">
      <BgImage />
      <!-- 其他組件 -->
    </div>
  </div>
</template>

<script>
import BgImage from '@/components/BgImage.vue'

export default {
  name: 'App',
  components: {
    BgImage
  }
}
</script>

<style>
.full-page {
  height: 100%;
}
</style>

接着，在全局樣式中添加一些必要的樣式，以確保背景圖片正確顯示。

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#app {
  height: 100%;
}

.full-page {
  position: relative;
  overflow: hidden;
}

三、自適應

為了保證背景圖片在不同的設備上都能夠自適應屏幕大小，需要在組件中添加一些代碼，以確保背景圖片的尺寸正確調整。

resizeImage() {
  const img = new Image()
  img.src = this.bgSrc
  img.onload = () => {
    const rate = img.width / img.height
    const screenRate = window.innerWidth / window.innerHeight
    const fullImg = document.querySelector('.full-img')
    if (rate < screenRate) {
      fullImg.style.width = 'auto'
      fullImg.style.height = '100%'
    } else {
      fullImg.style.width = '100%'
      fullImg.style.height = 'auto'
    }
  }
}

該代碼使用JavaScript計算屏幕的寬高比，並將背景圖片的寬高比與之進行比較。如果背景圖片的寬高比小於屏幕的寬高比，則將圖片的高度設置為100%，寬度自適應。反之亦然。

四、照片牆實現

如果需要在全屏背景圖片上顯示照片牆，則可以在組件中添加一些代碼，以便實現該功能。

 <template>
  <div class="photo-wall">
    <img src="..." class="photo" />
    <img src="..." class="photo" />
    ...
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      const photos = document.querySelectorAll('.photo')
      for (let i = 0; i < photos.length; i++) {
        photos[i].style.left = `${i % 4 * 25}%`
        photos[i].style.top = `${Math.floor(i / 4) * 25}%`
      }
    })
  }
}
</script>

<style>
.photo-wall {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.photo {
  position: absolute;
  width: 25%;
  height: 25%;
}
</style>

以上代碼通過計算每一張照片的位置，並將其設置為絕對位置，從而實現了照片牆的效果。

五、結語

通過以上幾個方面的講解，相信大家已經能夠輕鬆地實現Vue全屏背景圖片的效果了。希望本篇文章對大家有所幫助。