Vue.jsでwindowオブジェクトのリサイズイベントでの処理を実行する
最終更新日: Update!!
Vue.jsのプロジェクトにて、リサイズイベントで何かの処理を実行したいときに使える方法のメモです。Vue.jsはその特性上、windowオブジェクトを使う場合には注意するポイントがあります。まずはコードを見ていきます。
【Vue】※一部抜粋
注意したいのはVue.jsの場合、DOMが生成されるのがmountedになるので、createdなどで実行すると、windowオブジェクトがundefinedとなってしまいます。ですので、リサイズイベントの実行はmounted以降にするように気をつけます。
<template> <div id="app"> <div>ウィンドウ幅:<span>{{ windowWidth }}</span></div> <div v-if="windowWidth > 800"> ウィンドウ幅は800px以上です </div> <div v-if="windowWidth <= 799"> ウィンドウ幅は800px未満です </div> </div> </template> <script> export default { data() { return { windowWidth: 0 } }, mounted() { window.addEventListener('resize', this.calculateWindowWidth); }, beforeDestroy() { window.removeEventListener('resize', this.calculateWindowWidth); }, methods: { calculateWindowWidth() { this.windowWidth = window.innerWidth; console.log(this.windowWidth); } } } </script>テンプレートにはウィンドウ幅の数値と、ウィンドウ幅によって切り替わる簡単な処理をサンプルとしてあげています。特定の画面幅で表示が切り替わるような仕組みです。スクリプトには「data」オプションにウィンドウ幅の値が入るようになっています。デフォルトで0が入るようにしています。そして「methods」には画面幅をdataオプションの値に代入されるような処理を記述しています。 続けて「mounted」内にリサイズイベントで、methodsで定義した関数をコールバックで実行させます。最後に追加したイベントリスナーを削除させます。これはmountedより後のライフサイクルフックで実行させていきます。ここでは「beforeDestroy」にて実行しています。 実際にブラウザで見てみると、リサイズイベントで処理が行われているのが確認できます。また、ウィンドウ幅で切り分けた処理も実際に機能しているのがわかります。


sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories