vueJs responsive screen switcher

updated: 2018/4/27

 

vueJS でスクリーンサイズに応じて処理を切り替えたい場合に関して過去に書いた記事のフォローアップ

monteecristoo.hatenablog.com

 

上記方法だとリロードごとには適用されるが例えばタブレットの縦横を回転させたときなどには適用されない( computed で作ったプロパティが vue 内の dependency に依存しないためリアクティブに値が変化しない??)

 

スクリーンの大小を取得するメソッドを作り、window に addEventListener で画面のリサイズごとにイベントを発火させる。

data() {
return {
isLarge: '',
}
},

methods: {
screen: function () {
if(window.matchMedia('(min-width: 1024px)').matches)
{
this.isLarge = true;
} else
{
this.isLarge = false;
}
}
},
mounted() {

初期値の設定
if(window.matchMedia('(min-width: 1024px)').matches)
{
this.isLarge = true;
} else
{
this.isLarge = false;
}

リサイズされた時のイベント発火
window.addEventListener('resize', this.screen);
},

 

* Vuetify なら onResize() を使用して実装も可能

vuetifyjs.com

 

参考:

forum.vuejs.org