答题卡中必须用Teleport是因为其固定结构（如overflow:hidden或transform）会裁剪、偏移或遮挡浮动面板；Teleport将面板渲染到body等外部容器，脱离限制，同时保持数据响应和事件通信。
在考试答题卡组件中实现浮动面板（如题干预览、公式栏、草稿区）的自由传送，核心是用 Teleport 把面板内容“移出”答题卡 DOM 层级，避免被其样式或布局逻辑干扰，同时保持与答题卡组件的数据响应和事件通信。
为什么答题卡里必须用 Teleport？
考试答题卡通常有固定结构：左侧题号列表 + 右侧作答区，常设 overflow: hidden 或 transform（用于滚动优化或动画），导致浮动面板一出现就被裁剪、定位偏移或层级压住。Teleport 将面板渲染到 body 或独立容器，彻底脱离这些限制。
典型浮动面板的传送方式
-
题干悬浮预览：鼠标悬停题号时，在光标附近显示题干摘要。用
<Teleport to="body">渲染，并通过position: fixed+ 动态left/top定位，确保不随答题卡滚动而消失。 -
全局公式工具栏：固定在视口右下角，所有题目都可调用。创建一个
<div id="formula-toolbar"></div>在index.html的body底部，然后用<Teleport to="#formula-toolbar">传送工具栏组件，避免重复挂载。 -
单题草稿浮层：点击某题“草稿”按钮后，在该题区域上方弹出编辑框。此时不传送到
body，而是传送到一个<div id="draft-overlay"></div>（同级于答题卡容器），再用 CSS 的position: absolute配合相对定位父容器精准对齐。
关键细节处理
-
目标容器必须提前存在：若用
to="#draft-overlay"，需在答题卡父组件的onMounted中检查并创建该节点，否则 Vue 会报错“Failed to locate Teleport target”。 -
避免多个 Teleport 冲突：多个浮动面板（如同时打开题干预览和公式栏）都传送到
body，靠z-index分层控制。建议统一管理：题干预览z-index: 1050，公式栏1060，草稿浮层1070。 -
移动端适配可禁用传送：小屏幕下浮动面板可能影响操作，用
:disabled="isMobile"让面板回归原位置渲染，保持布局连续性。
数据与交互不中断
Teleport 不影响响应式数据流。题干预览仍能读取当前题目 props.question，草稿浮层的输入仍绑定答题卡内的 ref 数据；关闭事件也正常通过 $emit 或 defineExpose 回传。逻辑完全保留在答题卡组件内，只是 DOM 位置变了。
