vue+elementUI 实现内容区域高度自适应的示例
更新时间:2020年09月26日 10:28:27 作者:认真对待世界的小白
这篇文章主要介绍了vue+elementUI 实现内容区域高度自适应的示例,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
步骤很简单:
通过动态绑定属性给<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 实现内容区域高度自适应的资料请关注脚本之家其它相关文章!
相关文章
详解vue3+element-plus实现动态菜单和动态路由动态按钮(前后端分离)
本文需要使用axios,路由,pinia,安装element-plus,并且本文vue3是基于js而非ts的,这些环境如何搭建不做描述,需要读者自己完成,感兴趣的朋友跟随小编一起看看吧2023-11-11Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
这篇文章主要介绍了Vue.js 实现地址管理页面的思路(地址添加、编辑、删除和设置默认地址),本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
这篇文章主要介绍了vue利用全局导航守卫作登录后跳转到未登录前指定页面,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05Vue安装sass-loader和node-sass版本匹配的报错问题
这篇文章主要介绍了Vue安装sass-loader和node-sass版本匹配的报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
最新评论