実装方法
ブラウザのリサイズはwindowのイベントでVueが直接関与する部分ではないため、コンポーネントの作成時にイベントリスナを追加します。コンポーネント削除時には、忘れずにイベントリスナも削除します。
サンプルコード
<template>
<div>
<p>window width: {{ width }}</p>
<p>window height: {{ height }}</p>
</div>
</template>
<script>
export default {
data: function () {
return {
width: window.innerWidth,
height: window.innerHeight
}
},
methods: {
handleResize: function() {
// resizeのたびにこいつが発火するので、ここでやりたいことをやる
this.width = window.innerWidth;
this.height = window.innerHeight;
}
},
mounted: function () {
window.addEventListener('resize', this.handleResize)
},
beforeDestroy: function () {
window.removeEventListener('resize', this.handleResize)
}
}
</script>
動作がモッサリするようならlodashの_.debounce
等を使用し、発火頻度を落とすと良いみたい。