vue+elementUI实现内容区域高度自适应-创新互联

本篇文章为大家展示了vue+elementUI 实现内容区域高度自适应，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联是一家专注于网站设计制作、成都做网站与策划设计,西安网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:西安等地区。西安做网站价格咨询:028-86922220

步骤很简单：

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

//defaultHeight是绑定的属性
<el-main :>
  <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();
}

当前标题：vue+elementUI实现内容区域高度自适应-创新互联
标题URL：https://www.cdcxhl.com/article16/jpddg.html

成都网站建设公司_创新互联，为您提供App设计、域名注册、响应式网站、服务器托管、微信公众号、品牌网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容