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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
Require.JS中的几种define定义方式示例
Jun 01 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
js实现input密码框显示/隐藏功能
Sep 10 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
JS实现放大镜效果
Sep 21 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网站提速三大“软”招
2006/10/09 PHP
PHP base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
python的中异常处理机制
2018/08/30 Python
python学生管理系统
2019/01/30 Python
用Python配平化学方程式的方法
2019/07/20 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
2014年银行客户经理工作总结
2014/11/12 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
给客户的检讨书
2014/12/21 职场文书
公安机关起诉意见书
2015/05/20 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js