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


Posted in Javascript onSeptember 26, 2020

步骤很简单:

通过动态绑定属性给<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 实现内容区域高度自适应的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
理解Javascript_13_执行模型详解
Oct 20 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
js有序数组的连接问题
Oct 01 Javascript
Javascript事件实例详解
Nov 06 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
Openlayers实现测量功能
Sep 25 #Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 #Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 #jQuery
Openlayers测量距离与面积的实现方法
Sep 25 #Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 #Javascript
OpenLayers3实现测量功能
Sep 25 #Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 #Javascript
You might like
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
vue实现倒计时功能
2021/03/24 Vue.js
村干部任职承诺书
2015/01/21 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
考试没考好检讨书
2015/05/06 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
Python数组变形的几种实现方法
2022/05/30 Python