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中null与undefined分析
Jul 25 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
javascript模拟命名空间
Apr 17 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
浅谈JS的原型和继承
May 08 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
详解Python在七牛云平台的应用(一)
2017/12/05 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
详解python变量与数据类型
2020/08/25 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
小学优秀班干部事迹材料
2014/05/25 职场文书
物流管理专业求职信
2014/05/29 职场文书
课改心得体会范文
2016/01/25 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
CentOS MySql8 远程连接实战
2022/04/19 MySQL
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android