Element-UI抽屉隐藏后，如何将元素定位右下角？
时间：2025-03-15 08:27:18 436浏览 收藏
本文介绍了Element-UI抽屉组件隐藏后，如何将内部元素绝对定位到页面右下角的有效方法。由于Element-UI的Drawer组件隐藏时采用`display: none;`，导致常规的`position: fixed;`失效。文章提供了一种利用Vue的`teleport`功能，将目标元素渲染到`body`元素下，并结合`v-if`指令控制显示与隐藏，最终实现即使抽屉隐藏，元素也能保持在右下角的解决方案，并附带了详细代码示例和关键步骤说明，帮助开发者解决Element-UI抽屉隐藏后元素定位问题。
Element UI Drawer 隐藏后元素绝对定位到右下角的解决方案
项目中，需要在 Drawer 隐藏后，其内部的 div 元素以绝对定位的方式悬浮在页面右下角。然而，Element UI Drawer 默认隐藏方式为 display: none;，导致 position: fixed; 和高 z-index 属性失效。
解决方法是使用 Vue 的 teleport 功能，将需要绝对定位的元素渲染到 body 元素下。当 Drawer 隐藏时，该元素仍然可见并保持其位置。
实现代码如下：
悬浮窗口
关键在于：
- 使用
teleport to="body"将floating-div元素移动到body元素内。 - 使用
v-if="visible"确保只有在 Drawer 可见时才渲染floating-div元素，避免隐藏后仍然显示。 floating-div元素使用position: fixed;实现绝对定位，并设置bottom和right属性控制其位置。z-index确保其显示在其他元素之上。
通过此方法，即使 Drawer 隐藏，floating-div 元素仍会保持在页面右下角。 请注意调整 bottom 和 right 属性值以适应您的页面布局。
本篇关于《Element-UI抽屉隐藏后，如何将元素定位右下角？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！
