Portal 渲染是将组件内容逻辑保留在当前树、物理挂载到任意 DOM 节点的技术，用于解决全局弹窗的定位失效、层级截断、样式穿透难及无障碍受限等问题。
Portal 渲染是一种将组件内容“逻辑上保留在当前组件树，物理上挂载到任意 DOM 节点”的技术。它不改变组件的响应式关系、事件流向或状态作用域，只调整最终渲染位置——这对全局弹窗、Tooltip、下拉菜单等需要脱离父容器限制的场景至关重要。
为什么 Portal 是解决全局弹窗的核心方案
传统弹窗嵌套在深层组件中时，容易被以下问题卡住：
-
定位失效：父级设置了
transform、perspective或filter，导致position: fixed相对于该祖先而非视口 -
层级被截断：祖先元素有
overflow: hidden或较低z-index，弹窗直接被裁剪或压在底层 -
样式穿透困难：scoped CSS 无法自然影响弹窗区域，需额外加
::v-deep或提为全局样式 -
无障碍与焦点管理受限：DOM 层级混乱影响
focus-trap和屏幕阅读器语义流
主流框架中的 Portal 实现方式
核心思路一致：提供一个“源”（要传送的内容）和一个“目标”（真实挂载点），中间由框架桥接。
-
React：用
ReactDOM.createPortal(child, container)，container必须是已存在的 DOM 元素（如document.getElementById('portal-root')） -
Vue 3：原生支持
<teleport to="#modal-root">...</teleport>，无需插件，to可为选择器、ref 或 DOM 元素 -
Vue 2：通过
portal-vue插件，使用<portal to="name"></portal>+<portal-target name="name"></portal-target> -
Mithril.js：调用
m.mount(element, Component)，直接把组件挂到任意节点，天然支持多挂载点
实战：5 分钟完成一个可复用的全局 Modal 组件（Vue 3 示例）
以 Teleport 为基础，兼顾关闭逻辑、遮罩层、焦点捕获和 ESC 关闭：
- 在
index.html的底部添加挂载点：<div id="modal-root"></div> - 创建
Modal.vue，使用Teleport将内容传送到该节点 - 配合
v-model控制显隐，用onMounted/onUnmounted管理 body 锁定与焦点 - 监听
ESC键并触发关闭，确保首次打开时自动聚焦模态框内部第一个可聚焦元素
关键代码片段：
<template><br> <Teleport to="#modal-root"><br> <transition name="fade"><br> <div v-if="visible" class="modal-overlay" @click="handleBackdropClick"><br> <div class="modal-content" @click.stop ref="modalRef"><br> <slot></slot><br> <button @click="$emit('update:visible', false)">关闭</button><br> </div><br> </div><br> </transition><br> </Teleport><br></template>
注意事项与避坑指南
-
挂载点必须存在且唯一：服务端渲染（SSR）时注意
document不可用，建议在onMounted中动态创建或使用if (typeof document !== 'undefined')守卫 - 事件冒泡照常工作：虽然 DOM 位置变了，但 React/Vue 的事件系统仍按组件树冒泡，无需额外处理
-
不要滥用多个 Portal 根节点：统一用一个
#modal-root即可，靠组件自身控制显隐，避免 DOM 节点爆炸 -
无障碍支持不能少：给遮罩层加
aria-modal="true"、role="dialog"，关闭时恢复焦点到触发按钮
