Vue實(shí)現(xiàn)固定底部組件的示例
更新時(shí)間：2021年07月29日 08:39:35 作者：劉_小_二
本文主要介紹了Vue實(shí)現(xiàn)固定底部組件的示例，文中通過示例代碼介紹的非常詳細(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）來判斷是否顯示底部按鈕，具體代碼如下：
<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實(shí)現(xiàn)模糊查詢-Mysql數(shù)據(jù)庫(kù)數(shù)據(jù)
這篇文章主要介紹了基于Vue實(shí)現(xiàn)Mysql數(shù)據(jù)庫(kù)數(shù)據(jù)模糊查詢,下面文章我們主要實(shí)現(xiàn)的是輸入框中輸入數(shù)據(jù)，根據(jù)輸入的結(jié)果模糊搜索數(shù)據(jù)庫(kù)對(duì)應(yīng)內(nèi)容，實(shí)現(xiàn)模糊查詢，感興趣的小伙伴可以進(jìn)入文章我們一起學(xué)習(xí)2021-12-12
vueScroll實(shí)現(xiàn)移動(dòng)端下拉刷新、上拉加載
這篇文章主要介紹了vueScroll實(shí)現(xiàn)移動(dòng)端下拉刷新、上拉加載，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
el-tree樹狀控件如何定位到選中的節(jié)點(diǎn)的位置
這篇文章主要介紹了el-tree樹狀控件如何定位到選中的節(jié)點(diǎn)的位置,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了vue數(shù)據(jù)更新UI不刷新顯示的解決辦法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要給大家介紹了關(guān)于vue.js中ref和$refs使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)
日常業(yè)務(wù)中路由跳轉(zhuǎn)的同時(shí)傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
在一般情況下,vue項(xiàng)目代碼部署發(fā)布只需將代碼打包后直接上傳到服務(wù)器即可,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包并發(fā)布的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
vue.js實(shí)現(xiàn)點(diǎn)擊后動(dòng)態(tài)添加class及刪除同級(jí)class的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue.js實(shí)現(xiàn)點(diǎn)擊后動(dòng)態(tài)添加class及刪除同級(jí)class的相關(guān)資料,需要的朋友可以參考下2018-04-04
vue 實(shí)現(xiàn)邊輸入邊搜索功能的實(shí)例講解
今天小編就為大家分享一篇vue 實(shí)現(xiàn)邊輸入邊搜索功能的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了詳解vue-cli3多頁(yè)應(yīng)用改造，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06