我们在使用Qussar QScrollArea等控件的时候，很多情况下，必须给出一个固定的高度，否则控件的高度会变成 0，导致无法显示出来。如何动态适配View高度呢？ 参考如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<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}; }, }, } |
或者类似下面的情况：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div id="q-app"> <div class="q-pa-md"> <q-layout class="shadow-2 rounded-borders" container ref="mainView" view="hHh Lpr lff"> . . . <q-resize-obeserver @resize="updateHeights" /> </q-layout> </div> </div> </template> <script> . . . export default { . . . methods: { . . . updateHeights(size) { // { // width: 20 // width of container (in px) // height: 50 // height of container (in px) // } const offset = this.$refs.mainView.$el.offsetTop; this.$refs.mainView.$el.style.height = (window.innerHeight - offset) + 'px'; } }, } |
参考链接
- Resize Observer (for Element)
- Best practice setting up q-scroll-area
- Scroll Area
- Text area with a maximum height of 100%
- Q-Scroll-Area not initializing and resizing properly in mobile (QResizeObservable) #2860
- Q-Scroll-Area child not full height if class="fit"
- How to make a Quasar q-page-container child use full height of its grandparent?
- Component to take all available height with Flexbox (in Quasar/Vue)
- 在移动端避免使用100vh
- Vue屏幕自适应
- vue获取元素宽、高、距离左边距离，右，上距离等还有XY坐标轴