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>

多多指教~

标签：Vue,盒子,footer,高度,clientHeight,changeFixed,窗口,clientHeight1,clientHeight2
来源： https://www.cnblogs.com/androsen/p/15368056.html