vue3中的teleport（瞬移）组件

1、描述

teleport组件提供了一种干净的方法，让组件的html在父组件界面外的特定标签（很可能是body）下插入显示。说白了就是在这个组件里的元素不会嵌套在id = 'app的容器里显示，而是挂载在body标签上。

2、示例 2.1、父组件 2.1.1、html部分

<template> <h2>App components: { ModalButton } setup() { return {} }, } 

2.2、子组件 2.2.1、html部分

<template> <button @click="modalOpen = true"> Open full screen modal! (With teleport!)  ref } from 'vue' export default { name: 'modal-button', setup () { const modalOpen = ref(false) return { modalOpen } } } 

2.2.3、css部分

.modal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; } .modal div { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: white; width: 300px; height: 300px; padding: 5px; }