好资源导航 » 文章资讯 » vue+elementUI 实现内容区域高度自适应的示例

vue+elementUI 实现内容区域高度自适应的示例

2023-07-14 16:35:04 70

步骤很简单：

通过动态绑定属性给绑定高度，而高度通过innerHeight获取，减去你的头部和底部高度，剩下的就是整个内容区域的高度了！话不多说，上代码

//defaultHeight是绑定的属性





//注意：这里的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计算高度

以上就是vue+elementUI实现内容区域高度自适应的示例的详细内容，更多关于vue+elementUI实现内容区域高度自适应的资料请关注毛票票其它相关文章！

返回顶部
514930285
czq8825@qq.com

vue+elementUI 实现内容区域高度自适应的示例

热门推荐

随机推荐