Element-UI Drawer：巧妙解决子元素隐藏后悬浮问题

在使用Element-UI的Drawer组件时，如果需要实现子元素在Drawer隐藏后仍然保持悬浮于页面右下角的效果，则需要调整Drawer的隐藏方式。默认的display: none;会阻止子元素的悬浮显示。

解决方案：利用Vue的Teleport功能

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

为了解决这个问题，我们可以利用Vue.js的teleport功能，将需要悬浮的子元素渲染到页面的body元素中。这样一来，即使Drawer通过visibility: hidden;隐藏，子元素依然能够保持其悬浮位置。

具体步骤如下：

<code class="vue"><teleport to="body">
  <div class="floating-window">...</div>
</teleport></code>

通过将<div class="floating-window">...</div>包裹在<teleport to="body"></teleport>中，该div元素将被渲染到body中，从而不受Drawer的显示状态影响，始终保持悬浮状态。 记住要为.floating-window类添加相应的CSS样式以实现右下角悬浮效果。