JavaScript

【Nuxt.js】 画面いっぱいに画像を表示したい! Nuxt.jsでwindow height を取得する

画面いっぱいに画像を表示させたい!

こんにちは。どんぶラッコです。

このように、画面いっぱいに画面を表示させたいこと、ありますよね。

今回は、Nuxt.jsでの実現方法を解説します!

サンプルコード

<template>
  <div :style="{height: height + 'px'}" class="header-img">
  </div>
</template>
<script>
export default {
  data () {
    return {
      height: 0
    }
  },
  created () {
    if (process.client) {
      window.addEventListener('resize', this.handleResize)
      this.handleResize()
    }
  },
  destroyed () {
    if (process.client) {
      window.removeEventListener('resize', this.handleResize)
    }
  },
  methods: {
    handleResize () {
      this.height = window.innerHeight
    }
  }
}
</script>
<style scoped>
.header-img {
  /*background-image: url("[好きなURL]");*/
  background-color: #555555;
}
</style>

何をやっているのか、詳細をみていきましょう。

イベントリスナーの登録

まずは、 created() で イベントリスナーを追加しています。 resize、つまり画面サイズが変わる度に handleResize() メソッドを呼び出す処理です。

windowはクライアント側でしか発火しないため、 process.client を噛ませています。

  created () {
    if (process.client) {
      window.addEventListener('resize', this.handleResize)
    }
  },

ESLintを導入されている方であれば、ここで引っかかるかもしれません。

本来であればイベントはNuxt側で制御するべきであるため、Nuxt外の要素から変更を加えるイベントである `window.addEventListener` はLinterで弾かれるのです。

もしLinterのルールを一時的に無効化したい場合、 // eslint-disable-next-line を追加しましょう。

どんぶラッコ
どんぶラッコ
あくまでも例外的な処理であることを認識して使いましょう。
名無しさん
名無しさん
例外的にイベントを追加しているから `destroyed()` で `window.removeEventListener` を使ってイベントを削除しているんですね

windowの高さを取得するメソッド

    handleResize () {
      this.height = window.innerHeight
    }

window.innerHeightがウィンドウの高さを取得するメソッドです。

これで height に高さの情報が取得できました。

div要素に反映

あとは、vueのv-bindを活用して、divの高さを変更してあげます。

  <div :style="{height: height + 'px'}" class="header-img">
  </div>

こうやって要素分解すると案外わかりやすいですね♪

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニア経験を経て、ProgLearnのシステム開発を担当。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です