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
- レスポンシブ対応のインラインSVGを作成する
レスポンシブ対応のインラインSVGを作成する
- webpackで画像ファイルをバンドルしてCSSで読み込む画像をBase64エンコードする
webpackで画像ファイルをバンドルしてCSSで読み込む画像をBase64エンコードする
- メディアクエリを使わないレスポンシブコーディングを試してみる #3:コンテナクエリ
メディアクエリを使わないレスポンシブコーディングを試してみる #3:コンテナクエリ
- Vue.jsでStripe決済処理用のコンポーネントを作成する
Vue.jsでStripe決済処理用のコンポーネントを作成する
- GSAPのアニメーション進捗値取得とコントロールで円形のプログレスバーを作成する
GSAPのアニメーション進捗値取得とコントロールで円形のプログレスバーを作成する
- JavaScriptで再帰関数を使ってネストした配列の深さを調べる
JavaScriptで再帰関数を使ってネストした配列の深さを調べる
- MakeShopのクリエイターモードでオリジナルデザインのECサイトを構築するときに使えるコード集
MakeShopのクリエイターモードでオリジナルデザインのECサイトを構築するときに使えるコード集
- GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる#3:スクロールで固定表示
GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる#3:スクロールで固定表示
categories