Vue弹框组件如何挂载到合适的页面节点

需求场景

日常开发中，我们可能会需要实现类似这样的组件，组件带有弹框

一般实现

一般都是父盒子【position: relative;】弹框盒子相对父盒子【position: absolute;】
这种做法平时不会有什么问题，但是当有父盒子设置【overflow: hidden;】时，就会出现这种现象

是的，超出的部分已被隐藏了

学会观察

如果认真观察其他ui库的类似组件的话，你会发现它们都被挂载到body下面去了，所以该组件的父盒子影响不到弹窗的盒子

尝试实现

我们给弹框盒子加上一个ref属性

在点击事件里，我们使用this.$refs.downSelect获取该节点，并将其追加到body下

这里使用this.$nextTick()，是因为我控制弹框的显示是使用v-if，需要下次更新才能获取的到，好啦，我们看下效果
可以看到，已经挂载到body下了，不过你会发现，定位的位置好像不对呀！别急，下一步就是要计算弹框在body定位的位置了

思路讲解

我们原先相对于父盒子定位是没有问题的，现在相对于body，那么就需要计算出父盒子与body的距离
先给父盒子添加ref
点击事件获取pageChange，并且打印offsetTop属性

结果是

讲一下这个offsetTop：
通俗一点讲就是，获取距离最近设置position属性的父节点的顶部距离

来看下例子：

<div class="a">
    <div class