Element-UI Drawer隐藏后如何保持元素位置？

Element-UI Drawer组件隐藏后如何保持原有位置？

Element-UI的Drawer组件默认使用display: none隐藏，这会导致页面布局发生变化。如果需要隐藏Drawer但保持其在页面中的位置不变，可以使用visibility: hidden或Vue的传送门（Teleport）组件。

方法一：使用visibility: hidden

直接修改Drawer组件的样式，将display: none改为visibility: hidden。这种方法简单直接，但可能需要根据具体情况调整样式，以避免出现其他布局问题。 需要注意的是，虽然元素保持位置，但仍然占据空间。

方法二：使用Vue传送门(Teleport)

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

27

查看详情

更推荐使用Vue的Teleport组件。Teleport可以将组件渲染到DOM树中的任意位置。 具体步骤如下：

1. 创建父容器：在Drawer组件附近创建一个父容器元素（例如<div>）。 <li> <strong>使用Teleport：</strong>将需要保持位置的元素包裹在Teleport组件中，并指定父容器作为目标节点。</li> <p>示例代码：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;code class=&quot;vue&quot;&gt;&lt;template&gt; &lt;div&gt; &lt;el-drawer ref=&quot;drawer&quot; v-model=&quot;drawerVisible&quot; :before-close=&quot;handleClose&quot;&gt; <!-- Drawer内容 --> &lt;/el-drawer&gt; &lt;div ref=&quot;container&quot;&gt; &lt;teleport to=&quot;#container&quot;&gt; &lt;div class=&quot;floating-element&quot;&gt;悬浮元素&lt;/div&gt; &lt;/teleport&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import { ref } from 'vue'; export default { setup() { const drawerVisible = ref(false); const drawer = ref(null); const container = ref(null); const handleClose = (done) => { // ... 关闭Drawer的逻辑 done(); }; return { drawerVisible, drawer, container, handleClose }; }, }; &lt;/script&gt;&lt;/code&gt;</pre>
   登录后复制
   </div> <p>通过Teleport，即使Drawer隐藏，<code>floating-element也会保持在父容器container中的位置。 这种方法更优雅，避免了直接修改组件样式可能带来的副作用。 记住根据实际情况调整选择器。

   选择哪种方法取决于你的具体需求和项目结构。 如果只是简单的布局调整，visibility: hidden可能就足够了；如果需要更灵活的控制和更复杂的场景，则建议使用Teleport。