Vue实现固定底部组件的示例
目录
- 【实现效果】
- 【实现方式】
【实现效果】
![Vue实现固定底部组件的示例](https://img.it610.com/image/info11/e45608bf5615428aa1f863d9f33eb329.jpg)
文章图片
【实现方式】
![]()
文章图片
![]()
文章图片
这是固定在底部的按钮: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; }
【增加需求】增加一个A逻辑,当满足A逻辑的时候,底部按钮就不展示,其他情况则展示。
新增一个Bool值(isShow)来判断是否显示底部按钮,具体代码如下:
![]()
文章图片
![]()
文章图片
这是固定在底部的按钮: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; }
到此这篇关于Vue实现固定底部组件的示例的文章就介绍到这了,更多相关Vue 固定底部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆