画面いっぱいに画像を表示させたい！
こんにちは。どんぶラッコです。
このように、画面いっぱいに画面を表示させたいこと、ありますよね。
今回は、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>こうやって要素分解すると案外わかりやすいですね♪
