在用Vue2&ElementUI實現管理后臺框架的時候茫蛹，碰到一個問題：main塊的高度沒有自適應魁蒜，頁面留了一大塊的空白囊扳。
首先想到的就是用計算屬性來實現，但是在窗口變化時兜看，計算屬性并沒有變化锥咸。接著想到監(jiān)聽Window.resize。
找了一下细移，發(fā)現一篇相關的文章： VueJs 監(jiān)聽 window.resize 方法
感謝作者提供的思路搏予，確實可以解決問題。最后又嘗試優(yōu)化了一下：
<template>
<div id="app">
<!-- 頭部導航 -->
<header></header>
<main v-bind:style="{ 'height': mainHeight + 'px'}">
</main>
</div>
</template>
<script>
import Lodash from 'lodash'
export default {
name: 'app',
data: function () {
return {
mainHeight: document.body.clientHeight
}
},
mounted: function () {
const that = this
// _.debounce 是一個通過 lodash 限制操作頻率的函數弧轧。
window.onresize = _.debounce(() => {
console.log("onresize:" + that.mainHeight)
that.mainHeight = document.body.clientHeight
}, 400)
}
}
</script>
首先缔刹，定義 mainHeight 屬性球涛，并把 document.body.clientHeight 窗口高度的值賦給 mainHeight 屬性。
mainHeight: document.body.clientHeight
然后校镐，綁定內聯樣式：
v-bind:style="{ 'height': mainHeight + 'px'}"
最后，在vue掛載之后捺典，監(jiān)聽窗口的resize事件鸟廓。這里用到了Lodash工具庫，來延遲resize的響應頻率襟己。
window.onresize = _.debounce(() => {
console.log("onresize:" + that.mainHeight)
that.mainHeight = document.body.clientHeight
}, 400)
