Vue | 窗口大小变化时改变主内容盒子高度,可应用于footer固定

效果:

Vue | 窗口大小变化时改变主内容盒子高度,可应用于footer固定

 Vue | 窗口大小变化时改变主内容盒子高度,可应用于footer固定

 

1.在html盒子绑定属性ref = "mainBox"

<el-container  ref="mainBox" >...</el-container>

 

2.在script中操作窗口高度

<script>
mounted() {
    let clientHeight1 =`${document.documentElement.clientHeight}`;  //获取页面可视窗口高度
    this.changeFixed(clientHeight1)//初始化主体高度

    window.onresize = () => { //窗口变化时监听,此处用箭头函数方便操作this
      let clientHeight2 = `${document.documentElement.clientHeight}`;
      if (clientHeight1 !== clientHeight2) {//对比高度,传值,并更改主体高度
        clientHeight1 = clientHeight2;
        this.changeFixed(clientHeight2);
      }
    };
  },
  
methods: {
  changeFixed(clientHeight){ //动态修改样式 
  this.$refs.mainBox.$el.style.height = clientHeight - 410 + 'px';
}
</script>

多多指教~

 

上一篇:丽泽普及2022交流赛day8总结


下一篇:C#序列化与反序列化