溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關vue項目中如何使用footer組件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
footer為公用組件，其他頁面都需要引入，這是會存在一種情況：有的頁面高度很高，footer組件要放在內容的最后；有的頁面內容很少，高度很低，footer需要放在瀏覽器可視窗口的最底部；窗口高度的變化時，footer的位置需要重新調整。
可能有的伙伴首先想到的
position: fixed; bottom: 0;
這確實能解決頁面內容不足以撐滿瀏覽器高度的情況，但由于footer組件是公用的，在內容很多的頁面調用時，會出現內容被組件覆蓋的情況。
我最終的解決方案：
給內容不足以撐滿瀏覽器可視高度的頁面添加以下設置，通過動態（監測瀏覽器窗口變化）設置頁面容器最低高度，也就是footer組件正常加載，只是footer的兄弟容器的高度變化了，自身的位置也會變化。
script:
template:
解釋：
頁面第一次mounted()時，計算footer組件兄弟容器user-message的最小高度，其中的170為頂部header加上footer自身的高度，隨后給window添加窗口變化事件，回調函數重新計算minHeight的值，template中minHeight發生改變，footer的位置自然也就發生變化。
效果：
看完上述內容，你們對vue項目中如何使用footer組件有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
