首页 > 技术文章 > vue根据屏幕大小动态改变页面高度

yyywh 2021-09-16 15:22 原文

:style="`height:${height}px`" //用变量的方式设置页面高度

height: document.body.clientHeight //data中定义height初始值,为屏幕高度
 
window.onresize = () => {    //写在mounted中,onresize事件会在页面大小被调整时触发
    return (() => {
        window.screenHeight = document.body.clientHeight;
        this.height = window.screenHeight;
    })();
};
 
height(val) {        //在watch中监听height,浏览器窗口大小变动时自适应高度。
    this.height = val;
    console.log(this.height, "新的高度");
},

推荐阅读