
Element-UI Drawer组件隐藏后如何保持原有位置?
Element-UI的Drawer组件默认使用display: none隐藏,这会导致页面布局发生变化。如果需要隐藏Drawer但保持其在页面中的位置不变,可以使用visibility: hidden或Vue的传送门(Teleport)组件。
方法一:使用visibility: hidden
直接修改Drawer组件的样式,将display: none改为visibility: hidden。这种方法简单直接,但可能需要根据具体情况调整样式,以避免出现其他布局问题。 需要注意的是,虽然元素保持位置,但仍然占据空间。
方法二:使用Vue传送门(Teleport)
更推荐使用Vue的Teleport组件。Teleport可以将组件渲染到DOM树中的任意位置。 具体步骤如下:
-
创建父容器:在Drawer组件附近创建一个父容器元素(例如)。
- 使用Teleport:将需要保持位置的元素包裹在Teleport组件中,并指定父容器作为目标节点。
示例代码:
悬浮元素通过Teleport,即使Drawer隐藏,
floating-element也会保持在父容器container中的位置。 这种方法更优雅,避免了直接修改组件样式可能带来的副作用。 记住根据实际情况调整选择器。选择哪种方法取决于你的具体需求和项目结构。 如果只是简单的布局调整,
visibility: hidden可能就足够了;如果需要更灵活的控制和更复杂的场景,则建议使用Teleport。










