子组件调整element#message的高度

message组件

Element UI 的 Message 组件默认是在全局范围内显示消息提示，可以在子组件中使用它，但是Message是在全局注册，所以位置参数都是针对整个app.vue（页面来显示的）

调整高度

message有属性offset，可以用来调整高度。所以需要每次this.$message时，给offset属性赋值即可。

计算子组件高度

updateComponentPosition() {
    // myComponent是子组件
    const componentRect = this.$refs.myComponent.getBoundingClientRect();
    // 如果使用该vue文件自身，需要用getElementById或者getElementByClassName获取到该vue文件的dom元素
	const componentRect = document.getElementBy('myElement');

    this.componentTopPosition = componentRect.top;
    this.componentHeight = componentRect.height;
},

this.$message({
    ...
    // 此时位置在子组件的最上方
    offset: this.componentTopPosition + this.componentHeight
    ...
})

getBoundingClientRect() 是一个 DOM 元素的方法，用于获取一个元素的大小及其相对于视口的位置。这个方法返回一个对象，该对象包含了元素的 top、right、bottom、left、width 和 height 属性，这些属性都是相对于视口的坐标系。

返回的对象属性说明

top: 元素上边界到视口顶部的距离。
right: 视口右侧到元素右边界的距离（不是元素到视口右边界的距离）。
bottom: 视口底部到元素下边界的距离（不是元素到视口底边界的距离）。
left: 元素左边界到视口左侧的距离。
width: 元素的宽度。
height: 元素的高度。

注意事项

getBoundingClientRect() 返回的值是相对于视口的，而不是相对于文档的。这意味着如果页面有滚动，返回的坐标会考虑到滚动的影响。
方法返回的坐标是浮点数，即使元素的样式是整数。
如果元素不在视口内（例如，完全被其他元素遮挡或在折叠面板后面），getBoundingClientRect() 仍然可以返回准确的坐标信息。
在移动设备上，坐标可能因缩放而发生变化。

视口（Viewport）：

指的是用户通过浏览器或其他客户端软件查看网页内容时可见的区域。视口的概念尤其重要于响应式设计和移动设备的网页布局中，因为它直接影响了网页内容如何适应不同的屏幕尺寸和设备特性。

视口可以分为几种类型，每种类型在网页布局和响应式设计中扮演着不同的角色：

布局视口（Layout Viewport）:

在早期的网页设计中，布局视口通常指的是未缩放的浏览器窗口大小。然而，在移动设备上，为了兼容传统桌面网页的宽度，布局视口经常被设置为一个固定的宽度（如980px或1024px），这使得网页可以按预期显示，而不必做额外的缩放。

视觉视口（Visual Viewport）:

视觉视口是用户当前在屏幕上实际看到的网页部分。当用户缩放页面时，视觉视口的大小会改变，但布局视口的大小通常保持不变。这意味着即使用户缩放页面，网页的布局计算仍然基于布局视口的大小。

理想视口（Ideal Viewport）:

理想视口是为了使网页在移动设备上有最佳浏览体验而设定的视口大小。理想视口的宽度通常等于设备的实际屏幕宽度（以CSS像素计），这样网页可以完全填充屏幕，无需水平滚动。

设备视口（Device Viewport）:

设备视口是指设备本身的屏幕尺寸，包括其物理像素尺寸和设备像素比（DPR）。设备视口对于确定网页在设备上的最终呈现至关重要。

使用场景

动态调整元素位置或大小。
检测元素是否在视口内，用于懒加载图片等。
实现拖拽效果或碰撞检测。
计算元素之间的距离或重叠部分。

浏览器兼容性

getBoundingClientRect() 方法在现代浏览器中（包括 IE9+）广泛支持，但在一些较老的浏览器中可能不可用，这时可以使用 getBoundingClientRectNoScroll 作为兼容方案，不过这种方法在现代开发中已经很少使用。

总之，getBoundingClientRect() 是一个非常实用的方法，可以用于获取元素的精确位置和尺寸信息，对于实现响应式设计、动态布局和其他交互效果都非常有用。