VUE自适应FOOTER实现

最新推荐文章于 2026-03-13 00:15:31 发布

原创最新推荐文章于 2026-03-13 00:15:31 发布 · 1.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

WEBPACK/VUECLI3

该博客介绍项目使用Vue，代码在app.vue页。通过window.onresize监听窗口变化，还利用computed和watch监听vue - router的变化，同时提及了HTML、CSS和JS相关内容。

本项目使用Vue，代码位于app.vue页，通过window.onresize监听窗口变化，通过computed和watch监听vue-router的变化

HTML

          <Footer ref="footer" :style="{width:'100%',padding:'11px 50px'}"  :class="[(this.is_class_bottom) && this.$route.path != '/HomeDetail' ? 'footer_bottom':'footer_relative','layout-footer-center']">FOOTER</Footer>

CSS

.footer_bottom{
  position: fixed;
  bottom: 0;
}
.footer_relative{
  position: absolute;
}

JS

  mounted(){
    window.onresize = () => {
        return (() => {
          this.set_footer_position();
        })()
      }
  },

computed:{
    getName(){
      return this.$route.name;
    }
}
watch: {
    getName(){
        this.$nextTick(()=>{
          this.set_footer_position();
        })
    }
}
methods:{
    set_footer_position(){
        //表格未超出页面则footer的position：fixed
          //获取除footer以外所有元素高度和+HEADER+MARGINTOP
          let not_footer_height = this.$refs.content.$el.offsetHeight+this.$refs.content.$el.offsetTop; 
          //获取浏览器高度
          let client_height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
          //获取Footer高度
          let footer_height = this.$refs.footer.$el.offsetHeight;    
          //判断n_f_h+footerHeight是否大于浏览器高度
          if(not_footer_height + footer_height > client_height){
            this.is_class_bottom = false;//超出则不放在底部
          }else{
            this.is_class_bottom = true;//未超出则放于底部
          }
    }
}