vue+elementUI 实现内容区域高度自适应

步骤很简单:

通过动态绑定属性给<el-main></el-main>绑定高度,而高度通过 innerHeight 获取,减去你的头部和底部高度,剩下的就是整个内容区域的高度了!话不多说,上代码

//defaultHeight是绑定的属性
<el-main :style="defaultHeight">
    <router-view />
</el-main>
   
   
//注意:这里的defaultHeight必须是对象,不懂的可以去官网看下api
data() {
    return {
        defaultHeight: {
            height: ""
        }
    };
},
methods: {
    //定义方法,获取高度减去头尾
    getHeight() {
        this.defaultHeight.height = window.innerHeight - 90 + "px";
    }
},
created() {
    //页面创建时执行一次getHeight进行赋值,顺道绑定resize事件
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
}

当然,还可以通过CSS3计算高度

<style>
.el-main {
  height: calc(100vh - 70px);
}
</style>

 

posted @ 2020-08-27 15:31  认真对待世界的小白  阅读(11737)  评论(1编辑  收藏  举报