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 相关文章推荐
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
Angular2之二级路由详解
Aug 31 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
js实现页面导航层级指示效果
Aug 25 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
图象函数中的中文显示
2006/10/09 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
php发送post请求的三种方法
2014/02/11 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
在Python中使用__slots__方法的详细教程
2015/04/28 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
Python使用爬虫猜密码
2016/02/19 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
Python argparse模块使用方法解析
2020/02/20 Python
基于Python正确读取资源文件
2020/09/14 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
优秀应届毕业生推荐信
2014/02/18 职场文书
节能减排倡议书
2014/04/15 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
2014财务年终工作总结
2014/12/08 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
研究生给导师的自荐信
2015/03/06 职场文书