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小问题说明
Sep 26 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
JQuery基础语法小结
Feb 27 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
老生常谈的跨域处理
Jan 11 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
js 函数性能比较方法
Aug 24 Javascript
Ajax实现三级联动效果
Oct 05 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
isset和empty的区别
2007/01/15 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
常用PHP封装分页工具类
2017/01/14 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
JS实现碰撞检测的方法分析
2018/01/19 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python 调用HBase的简单实例
2016/12/18 Python
Python 实现微信防撤回功能
2019/04/29 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
精选奢华:THE LIST
2019/09/05 全球购物
信息专业大学生自我评价分享
2014/01/17 职场文书
爱我中华教学反思
2014/04/28 职场文书
公安学专业求职信
2014/07/27 职场文书
社区班子对照检查材料
2014/08/27 职场文书
2014财务年度工作总结
2014/11/11 职场文书
2015元旦标语横幅
2014/12/09 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
被告代理词范文
2015/05/25 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
React中的Context应用场景分析
2021/06/11 Javascript