<template>
<q-page>
. . .
<q-scroll-area>
<q-resize-obeserver @resize="updateHeights" />
<q-scroll-area>
</q-page>
</template>
<script>
. . .
export default {
. . .
methods: {
. . .
updateHeights(size) {
// {
// width: 20 // width of container (in px)
// height: 50 // height of container (in px)
// }
//重新计算整个区域的高度，使得滚动区域占满整个父控件的高度
const sz = this.measureElWrapSize(this.$el);
this.$el.style.height = sz.height + 'px';
},
/**
* 字符串对象是否不为空
*/
isNotEmpty: function (s) {
return (!this.isEmpty(s));
},
/**
* 字符串对象是否为空
*/
isEmpty: function (s) {
return (this.isNull(s) || ('' === s));
},
/**
* 对象是否为空
*/
isNull: function (o) {
return ((undefined === o) || (null === o));
},
/**
* 对象是否不为空
*/
isNotNull: function (o) {
return (!this.isNull(o));
},
// 计算对象适配父控件大小,从底层开始向上搜索，直到搜索到受到限制的位置为止，然后反向计算应该得到的宽高
measureElWrapSize: function (el) {
const hls = []; //到第一次出现高度限制的父窗口的数组
const wls = []; //到第一次出现宽度限制的父窗口的数组
// 向上搜索，直到父控件出现高度限制，否则继续向上搜索
let p = el.offsetParent;
let maxH = window.innerHeight;
while (this.isNotNull(p)) {
const h = p.style.height;
if (this.isNotEmpty(h)) {
maxH = Math.min(parseInt(h), maxH);
break;
}
hls[hls.length] = p;
p = p.offsetParent;
}
// 逐层遍历父亲控件，计算剩余高度
let i = 0;
for (; i < hls.length; i++) {
const e = hls[i];
maxH = maxH - e.offsetTop;
}
//需要计算自身的顶部偏移
maxH = maxH - el.offsetTop;
if (maxH < 0) {
maxH = 0;
}
// 向上搜索，直到父控件出现宽度限制，否则继续向上搜索
let maxW = window.innerWidth;
p = el.offsetParent;
while (this.isNotNull(p)) {
const w = p.style.width;
if (this.isNotEmpty(w)) {
maxW = Math.min(parseInt(w), maxW);
break;
}
wls[wls.length] = p;
p = p.offsetParent;
}
// 逐层遍历父亲控件，计算剩余宽度
i = 0;
for (; i < wls.length; i++) {
const e = wls[i];
maxW = maxW - e.offsetLeft;
}
//需要计算自身的左侧偏移
maxW = maxW - el.offsetLeft;
if (maxW < 0) {
maxW = 0;
}
return {width: maxW, height: maxH};
},
},
}