巧用teleport解决element-ui drawer组件的绝对定位难题
Element-UI的Drawer组件默认使用display: none;隐藏内容，这会导致其子元素无法使用position: fixed;进行绝对定位。 为了解决这个问题，Vue的Teleport功能提供了一个优雅的解决方案。
Teleport可以将组件的渲染目标更改到DOM树中的其他位置。在本例中，我们将Drawer内部的div元素渲染到标签下。 这样一来，即使Drawer隐藏，该div元素仍然保持在页面中，从而实现绝对定位。
实现方法如下：
<code class="vue"><template>
<el-drawer ref="drawer" v-model="drawerVisible">
<teleport to="body">
<div id="floating-div">我是悬浮在右下角的 div</div>
</teleport>
</el-drawer>
</template>
<script>
import { ref } from 'vue';
import { ElDrawer } from 'element-ui';
export default {
components: { ElDrawer },
setup() {
const drawerVisible = ref(false);
return { drawerVisible };
}
};
</script></code>通过将#floating-div元素使用Teleport移动到，我们成功绕过了display: none;的限制，实现了即使Drawer隐藏，子元素也能保持绝对定位悬浮的效果。
以上就是如何使用Teleport解决Element-UI Drawer隐藏后子元素无法绝对定位的问题？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
282
