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

编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了vue+elementUI 实现内容区域高度自适应的示例,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下

步骤很简单:

通过动态绑定属性给<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>

以上就是vue+elementUI 实现内容区域高度自适应的示例的详细内容,更多关于vue+elementUI 实现内容区域高度自适应的资料请关注狼蚁SEO其它相关文章!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板