Vue实现固定底部组件的示例
更新时间：2021年07月29日 08:39:35 作者：刘_小_二
本文主要介绍了Vue实现固定底部组件的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【实现效果】
【实现方式】
<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>
【增加需求】增加一个A逻辑，当满足A逻辑的时候，底部按钮就不展示，其他情况则展示。
新增一个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>
到此这篇关于Vue实现固定底部组件的示例的文章就介绍到这了,更多相关Vue 固定底部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了基于Vue实现Mysql数据库数据模糊查询,下面文章我们主要实现的是输入框中输入数据，根据输入的结果模糊搜索数据库对应内容，实现模糊查询，感兴趣的小伙伴可以进入文章我们一起学习2021-12-12
这篇文章主要介绍了vueScroll实现移动端下拉刷新、上拉加载，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了el-tree树状控件如何定位到选中的节点的位置,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-08-08
这篇文章主要介绍了vue数据更新UI不刷新显示的解决办法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要给大家介绍了关于vue.js中ref和$refs使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
日常业务中路由跳转的同时传递参数是比较常见的,下面这篇文章主要给大家介绍了关于Vue项目如何在js文件里获取路由参数及路由跳转的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
在一般情况下,vue项目代码部署发布只需将代码打包后直接上传到服务器即可,下面这篇文章主要给大家介绍了关于Vue项目打包并发布的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
vue.js实现点击后动态添加class及删除同级class的实现代码
这篇文章主要介绍了vue.js实现点击后动态添加class及删除同级class的相关资料,需要的朋友可以参考下2018-04-04
今天小编就为大家分享一篇vue 实现边输入边搜索功能的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了详解vue-cli3多页应用改造，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
最新评论