Element-UI Drawer组件隐藏后如何保持原有位置？
Element-UI的Drawer组件默认使用display: none隐藏，这会导致页面布局发生变化。如果需要隐藏Drawer但保持其在页面中的位置不变，可以使用visibility: hidden或Vue的传送门（Teleport）组件。
方法一：使用visibility: hidden
直接修改Drawer组件的样式，将display: none改为visibility: hidden。这种方法简单直接，但可能需要根据具体情况调整样式，以避免出现其他布局问题。 需要注意的是，虽然元素保持位置，但仍然占据空间。
方法二：使用Vue传送门(Teleport)
Otter.ai
一个自动的会议记录和笔记工具，会议内容生成和实时转录
91 查看详情
更推荐使用Vue的Teleport组件。Teleport可以将组件渲染到DOM树中的任意位置。 具体步骤如下：
创建父容器：在Drawer组件附近创建一个父容器元素（例如
示例代码：
<code class="vue"><template> <div> <el-drawer ref="drawer" v-model="drawerVisible" :before-close="handleClose"> </el-drawer> <div ref="container"> <teleport to="#container"> <div class="floating-element">悬浮元素</div> </teleport> </div> </div></template><script>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 }; },};</script></code>
通过Teleport，即使Drawer隐藏，floating-element也会保持在父容器container中的位置。 这种方法更优雅，避免了直接修改组件样式可能带来的副作用。 记住根据实际情况调整选择器。
选择哪种方法取决于你的具体需求和项目结构。 如果只是简单的布局调整，visibility: hidden可能就足够了；如果需要更灵活的控制和更复杂的场景，则建议使用Teleport。
以上就是Element-UI Drawer隐藏后如何保持元素位置？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1141690.html
微信扫一扫
支付宝扫一扫
