• 售前

  • 售后

热门帖子
入门百科

Vue实现固定底部组件的示例

[复制链接]
无人岛屿颈 显示全部楼层 发表于 2021-8-14 14:14:56 |阅读模式 打印 上一主题 下一主题
目次


  • 【实现效果】
  • 【实现方式】

【实现效果】



【实现方式】

  1. <template>
  2.   <div id="app">
  3.     <div class="main">
  4.       <img alt="Vue logo" src="./assets/logo.png">
  5.       <HelloWorld msg="Welcome to Your Vue.js App"/>
  6.       <img alt="Vue logo" src="./assets/logo.png">
  7.     </div>
  8.     <div class="footer">这是固定在底部的按钮</div>
  9.   </div>
  10. </template>
  11. <script>
  12. import HelloWorld from './components/HelloWorld.vue'
  13. export default {
  14.   name: 'App',
  15.   components: {
  16.     HelloWorld
  17.   }
  18. }
  19. </script>
  20. <style>
  21. :root{
  22.   --footer-height: 50px;
  23. }
  24. body {
  25.   padding: 0;
  26.   margin: 0;
  27. }
  28. #app {
  29.   font-family: Avenir, Helvetica, Arial, sans-serif;
  30.   -webkit-font-smoothing: antialiased;
  31.   -moz-osx-font-smoothing: grayscale;
  32.   text-align: center;
  33.   color: #2c3e50;
  34.   margin-top: 60px;
  35. }
  36. .main{
  37.   padding-bottom: var(--footer-height);
  38.   overflow-y: auto;
  39. }
  40. .footer{
  41.   position: fixed;
  42.   bottom: 0;
  43.   width: 100%;
  44.   line-height: var(--footer-height);
  45.   background: #42b983;
  46.   color: #fff;
  47. }
  48. </style>
复制代码
【增加需求】增加一个A逻辑,当满意A逻辑的时候,底部按钮就不展示,其他环境则展示。
新增一个Bool值(isShow)来判定是否表现底部按钮,详细代码如下:
  1. <template>
  2.   <div id="app">
  3.     <div class="main">
  4.       <img alt="Vue logo" src="./assets/logo.png">
  5.       <HelloWorld msg="Welcome to Your Vue.js App"/>
  6.       <img alt="Vue logo" src="./assets/logo.png">
  7.     </div>
  8.     <div class="footer" v-if='isShow'>
  9.       <div class="footer-content">这是固定在底部的按钮</div>
  10.     </div>
  11.   </div>
  12. </template>
  13. <script>
  14. import HelloWorld from './components/HelloWorld.vue'
  15. export default {
  16.   name: 'App',
  17.   components: {
  18.     HelloWorld
  19.   },
  20.   data() {
  21.     return {
  22.       isShow: true
  23.     }
  24.   },
  25. }
  26. </script>
  27. <style>
  28. :root{
  29.   --footer-height: 50px;
  30. }
  31. body {
  32.   padding: 0;
  33.   margin: 0;
  34. }
  35. #app {
  36.   font-family: Avenir, Helvetica, Arial, sans-serif;
  37.   -webkit-font-smoothing: antialiased;
  38.   -moz-osx-font-smoothing: grayscale;
  39.   text-align: center;
  40.   color: #2c3e50;
  41.   margin-top: 60px;
  42. }
  43. .main {
  44.   overflow-y: auto;
  45. }
  46. .footer {
  47.   height: var(--footer-height);
  48. }
  49. .footer-content {
  50.   position: fixed;
  51.   bottom: 0;
  52.   width: 100%;
  53.   line-height: var(--footer-height);
  54.   background: #42b983;
  55.   color: #fff;
  56. }
  57. </style>
复制代码
到此这篇关于Vue实现固定底部组件的示例的文章就先容到这了,更多干系Vue 固定底部内容请搜索草根技术分享从前的文章或继承欣赏下面的干系文章盼望各人以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作