🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
>[success] # Teleport -- 指定挂载 1. 希望组件不是挂载在这个组件树上的,可能是移动到`Vue app`之外的其他位置,可以**通过teleport来完成**,他有两个属性 * `to`:指定将其中的内容移动到的目标元素,可以使用选择器(id选择#,css选择器.); * `disabled`:是否禁用 `teleport `的功能; 2. 使用场景有时候想将弹窗挂载到`body` 上 ~~~html <Teleport to="body"> <div v-if="open" class="modal"> <p>Hello from the modal!</p> <button @click="open = false">Close</button> </div> </Teleport> ~~~ 3. 想禁止使用 ~~~ <Teleport :disabled="isMobile"> ... </Teleport> ~~~ 4. 多个`Teleport `共享目标 ~~~ <Teleport to="#modals"> <div>A</div> </Teleport> <Teleport to="#modals"> <div>B</div> </Teleport> ~~~ * 被渲染为 ~~~ <div id="modals"> <div>A</div> <div>B</div> </div> ~~~