Element UI Drawer组件隐藏后子元素定位异常的解决方案
Element UI的Drawer组件默认使用display: none隐藏，这会导致其子元素的定位失效，例如悬浮失效等问题。为了解决这个问题，推荐使用visibility: hidden或Teleport门户。
方法一：使用visibility: hidden
将Drawer组件的隐藏方式修改为visibility: hidden，可以保留元素在文档流中的位置，避免定位问题：
// 在data中定义一个变量控制Drawer的显示状态
data() {
return {
drawerVisible: true
};
},
// 在methods中定义handleClose方法，控制Drawer隐藏时使用visibility:hidden
methods: {
handleClose(done) {
this.$nextTick(() => {
this.$refs.drawer.style.visibility = 'hidden';
done();
});
}
}
方法二：使用Teleport门户
Element UI提供Teleport门户功能，可以将组件渲染到文档中的任意位置。 将需要始终保持定位的子元素通过Teleport渲染到body中，使其不受Drawer组件显示状态的影响：
需要注意的是，使用Teleport后，需要自行管理子元素的样式和位置，确保其在页面上的正确显示。 v-if指令确保只有当Drawer可见时才渲染子元素。
选择哪种方法取决于具体需求，如果需要保持子元素在Drawer位置，则使用visibility: hidden；如果子元素需要独立于Drawer进行定位，则使用Teleport门户。 Teleport方法更灵活，但需要更多代码来管理子元素的样式和位置。
