vue中,根据屏幕不同设置子组件的高度,ref、$refs、props

时间:2024-03-27 12:32:26

现在有一个需求:中间子组件的高度要固定,并且由设备的高度(不同设备高度不同)和父组件头部和尾部决定
需求来源:用vue做移动端商城,使用mint-ui时,使用上拉下拉刷新加载功能时要固定容器高度,不然会被元素无线撑大,会导致不管什么时候直接拉动都会进行加载
本文用以记录实现这个需求的方法
知识点:用ref获取dom元素、$refs获取用 ref 注册过的所有 dom元素、通过props来父传子通信

用图解释:
vue中,根据屏幕不同设置子组件的高度,ref、$refs、props
思路:
1、先获取父组件的头部和尾部dom元素,传给中间的子组件
2、子组件获取父组件传递的数据
3、容器高度=获取设备高度(document.body.clientHeight)-父组件的头部高度-父组件的尾部高度
父组件的头部高度:this.apprefs.header.$ el.offsetHeight
父组件的尾部高度:this.apprefs.footer.$el.offsetHeight
4、给容器设置高度
代码如下:
vue中,根据屏幕不同设置子组件的高度,ref、$refs、props
created中操作数据,mounted中操作dom