在一些需要自適應(yīng)高度的應(yīng)用場(chǎng)景中，我們經(jīng)常需要控制動(dòng)態(tài)的height，以保證頁(yè)面的正常顯示。本文將通過(guò)Vue來(lái)介紹如何實(shí)現(xiàn)控制動(dòng)態(tài)height的方法。

上面的示例中，我們通過(guò)監(jiān)聽(tīng)window的resize事件來(lái)計(jì)算wrapper的最大高度，以保證內(nèi)容區(qū)域始終不超過(guò)wrapper的最大高度。在mounted中調(diào)用calcWrapperHeight計(jì)算并設(shè)置wrapper的高度，在beforeDestroy中移除resize事件監(jiān)聽(tīng)。

其中，calcWrapperHeight中主要涉及以下幾個(gè)步驟：

1. 獲取wrapper的offsetTop（到上一級(jí)元素的距離）；

2. 獲取wrapper的paddingBottom；

3. 獲取屏幕可視區(qū)域的高度；

4. 如果wrapper設(shè)置了maxHeight，判斷是否超過(guò)最大高度，如果超過(guò)則設(shè)置wrapperHeight為maxHeight，否則設(shè)置為可視區(qū)域高度減去offsetTop和paddingBottom。

這里需要注意的是，只有當(dāng)wrapper的最大高度小于可視區(qū)域高度減去offsetTop和paddingBottom時(shí)，才設(shè)置wrapperHeight為maxHeight。這是因?yàn)槿绻鹷rapper的最大高度大于可視區(qū)域高度減去offsetTop和paddingBottom時(shí)，內(nèi)容區(qū)域不會(huì)溢出，所以不需要設(shè)置wrapperHeight為maxHeight。

通過(guò)這種方式，我們可以輕松實(shí)現(xiàn)Vue控制動(dòng)態(tài)height。