Vue實(shí)現(xiàn)固定底部組件的示例
更新時(shí)間：2021年07月29日 08:39:35 作者：劉_小_二
本文主要介紹了Vue實(shí)現(xiàn)固定底部組件的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
【實(shí)現(xiàn)效果】
【實(shí)現(xiàn)方式】
<template>
<div id="app">
<div class="main">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<img alt="Vue logo" src="./assets/logo.png">
</div>
<div class="footer">這是固定在底部的按鈕</div>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
:root{
--footer-height: 50px;
}
body {
padding: 0;
margin: 0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.main{
padding-bottom: var(--footer-height);
overflow-y: auto;
}
.footer{
position: fixed;
bottom: 0;
width: 100%;
line-height: var(--footer-height);
background: #42b983;
color: #fff;
}
</style>
【增加需求】增加一個(gè)A邏輯，當(dāng)滿足A邏輯的時(shí)候，底部按鈕就不展示，其他情況則展示。
新增一個(gè)Bool值（isShow）來(lái)判斷是否顯示底部按鈕，具體代碼如下：
<template>
<div id="app">
<div class="main">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<img alt="Vue logo" src="./assets/logo.png">
</div>
<div class="footer" v-if='isShow'>
<div class="footer-content">這是固定在底部的按鈕</div>
</div>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
data() {
return {
isShow: true
}
},
}
</script>
<style>
:root{
--footer-height: 50px;
}
body {
padding: 0;
margin: 0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.main {
overflow-y: auto;
}
.footer {
height: var(--footer-height);
}
.footer-content {
position: fixed;
bottom: 0;
width: 100%;
line-height: var(--footer-height);
background: #42b983;
color: #fff;
}
</style>
到此這篇關(guān)于Vue實(shí)現(xiàn)固定底部組件的示例的文章就介紹到這了,更多相關(guān)Vue 固定底部?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue?+?Axios?請(qǐng)求接口方法與傳參方式詳解
使用Vue的腳手架搭建的前端項(xiàng)目，通常都使用Axios封裝的接口請(qǐng)求，項(xiàng)目中引入的方式不做多介紹，本文主要介紹接口調(diào)用與不同形式的傳參方法。對(duì)Vue?+?Axios?請(qǐng)求接口方法與傳參問(wèn)題感興趣的朋友一起看看吧2021-12-12
如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能
這篇文章主要介紹了如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
本篇文章主要介紹了vue事件修飾符和按鍵修飾符用法總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了iView框架問(wèn)題整理小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vue實(shí)現(xiàn)自定義公共組件及提取公共的方法
這篇文章主要介紹了vue實(shí)現(xiàn)自定義公共組件及提取公共的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue中本地靜態(tài)圖片的路徑應(yīng)該怎么寫(xiě)
這篇文章主要介紹了vue中本地靜態(tài)圖片的路徑應(yīng)該怎么寫(xiě),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue+Element實(shí)現(xiàn)動(dòng)態(tài)生成新表單并添加驗(yàn)證功能
這篇文章主要介紹了Vue+Element實(shí)現(xiàn)動(dòng)態(tài)生成新表單并添加驗(yàn)證功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Vue Router 是?Vue.js?的官方路由,它與 Vue.js 核心深度集成,讓用 Vue.js 構(gòu)建單頁(yè)應(yīng)用變得輕而易舉,這篇文章主要介紹了Vue Router的介紹與引入,需要的朋友可以參考下2024-01-01
vue項(xiàng)目如何引入json數(shù)據(jù)
這篇文章主要介紹了vue項(xiàng)目如何引入json數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-router如何實(shí)時(shí)動(dòng)態(tài)替換路由參數(shù)(地址欄參數(shù))
這篇文章主要介紹了vue-router如何實(shí)時(shí)動(dòng)態(tài)替換路由參數(shù)(地址欄參數(shù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09