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

Posted 2021-10-05 安照生

Vue中对于窗口大小变化时，改变主内容盒子高度，可应用于v-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>

多多指教~