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 相关文章推荐
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
javascript实现画板功能
Apr 12 Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 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
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
提高网站信任度的技巧
2008/10/17 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
python中wheel的用法整理
2020/06/15 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
文明家庭先进事迹材料
2014/05/14 职场文书
廉洁教育学习材料
2014/05/19 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
检讨书范文1000字
2015/01/28 职场文书
2019年最新借条范本!
2019/07/08 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书