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

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

i_ViOLeT_i

5645人浏览 · 2019-05-23 21:00:30

i_ViOLeT_i · 2019-05-23 21:00:30 发布

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

用图解释：
在这里插入图片描述
思路：
1、先获取父组件的头部和尾部dom元素，传给中间的子组件
2、子组件获取父组件传递的数据
3、容器高度=获取设备高度（document.body.clientHeight）-父组件的头部高度-父组件的尾部高度
父组件的头部高度：this.apprefs.header.$ el.offsetHeight
父组件的尾部高度：this.apprefs.footer.$el.offsetHeight
4、给容器设置高度
代码如下：
在这里插入图片描述
created中操作数据，mounted中操作dom

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^