Vue3 Teleport 怎么解决弹窗被父级遮挡？

Question

仓乃文 · Accepted Answer

弹窗、下拉菜单、Toast 等组件经常被父元素的 overflow:hidden 或 z-index 遮挡。Teleport 将组件的 DOM 渲染到指定容器（如 body），脱离当前 DOM 层级，彻底解决遮挡问题。弹窗场景： ```html ``` 条件渲染 Teleport： ```html ``` 补充说明： - to 属性必须是有效的 CSS 选择器或 DOM 元素 - disabled 为 true 时内容渲染在原位，不传送 - Teleport 的内容逻辑仍属于当前组件，props/emit/inject 正常工作 - 多个 Teleport 到同一目标时，按代码顺序追加 - 常见场景：Modal、Drawer、Toast、全局下拉菜单