Vue的footer組件是一個(gè)非常實(shí)用的組件，可以在網(wǎng)站底部顯示版權(quán)信息、聯(lián)系方式等重要內(nèi)容，在用戶(hù)瀏覽網(wǎng)站時(shí)提供更好的用戶(hù)體驗(yàn)。固定footer可以使其保持在屏幕底部，不受頁(yè)面內(nèi)容滾動(dòng)影響，保持與網(wǎng)頁(yè)內(nèi)容的協(xié)調(diào)性，而vue組件庫(kù)提供了簡(jiǎn)單易用的方式來(lái)實(shí)現(xiàn)固定footer。

首先需要在vue組件中引入footer組件，并在底部放置footer組件，例如：

<template>
<div>
<!-- 網(wǎng)頁(yè)中的內(nèi)容 -->
<Footer />
</div>
</template>
<script>
import Footer from '@/components/Footer.vue'
export default {
components: {
Footer
}
}
</script>

接下來(lái)需要在footer組件中進(jìn)行樣式設(shè)置，使其固定在屏幕底部：

<template>
<div class="footer">
<p>版權(quán)信息??</p>
</div>
</template>
<script>
export default {
mounted() {
const height = this.$el.offsetHeight
document.body.style.paddingBottom = `${height}px`
}
}
</script>
<style lang="scss" scoped>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
text-align: center;
line-height: 60px;
p {
margin: 0;
font-size: 14px;
color: #999;
}
}
</style>

在mounted生命周期函數(shù)中，獲取footer組件的高度并設(shè)置body的padding-bottom值，以免footer擋住頁(yè)面內(nèi)容。同時(shí)，設(shè)置footer的樣式：position為fixed，保證其固定在底部；left和bottom的值為0，使其錨定在屏幕左下方；width設(shè)為100%，與整個(gè)頁(yè)面寬度相同；height設(shè)為60px，與footer的高度相同；background-color設(shè)為#f5f5f5，為了與頁(yè)面區(qū)分開(kāi)來(lái)；text-align設(shè)為center，使版權(quán)信息垂直居中；p標(biāo)簽的樣式設(shè)為margin為0，font-size為14px，color為#999，保證版權(quán)信息的平衡性。

通過(guò)以上步驟，就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的vue固定footer，提供更好的用戶(hù)體驗(yàn)和網(wǎng)站協(xié)調(diào)性。