vue項(xiàng)目中如何使用footer組件

今天就跟大家聊聊有關(guān)vue項(xiàng)目中如何使用footer組件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

footer為公用組件，其他頁(yè)面都需要引入，這是會(huì)存在一種情況：有的頁(yè)面高度很高，footer組件要放在內(nèi)容的最后；有的頁(yè)面內(nèi)容很少，高度很低，footer需要放在瀏覽器可視窗口的最底部；窗口高度的變化時(shí)，footer的位置需要重新調(diào)整。

可能有的伙伴首先想到的

position: fixed; 
bottom: 0;

這確實(shí)能解決頁(yè)面內(nèi)容不足以撐滿瀏覽器高度的情況，但由于footer組件是公用的，在內(nèi)容很多的頁(yè)面調(diào)用時(shí)，會(huì)出現(xiàn)內(nèi)容被組件覆蓋的情況。

我最終的解決方案：

給內(nèi)容不足以撐滿瀏覽器可視高度的頁(yè)面添加以下設(shè)置，通過(guò)動(dòng)態(tài)（監(jiān)測(cè)瀏覽器窗口變化）設(shè)置頁(yè)面容器最低高度，也就是footer組件正常加載，只是footer的兄弟容器的高度變化了，自身的位置也會(huì)變化。

script:

template:

解釋：

頁(yè)面第一次mounted()時(shí)，計(jì)算footer組件兄弟容器user-message的最小高度，其中的170為頂部header加上footer自身的高度，隨后給window添加窗口變化事件，回調(diào)函數(shù)重新計(jì)算minHeight的值，template中minHeight發(fā)生改變，footer的位置自然也就發(fā)生變化。

效果：

看完上述內(nèi)容，你們對(duì)vue項(xiàng)目中如何使用footer組件有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。