28.vue3学习篇- teleport

在 Vue 3 中，<Teleport>是一个强大的功能，它允许你将一个组件的模板内容渲染到 DOM 中的不同位置，而不是在该组件的父级组件的 DOM 层级中渲染。

以下是一个基本的使用示例：

// src/dialog.vue 公共弹窗

<template>
    <div class="portals">
        <button @click="ShowNotification">trigger Notification</button> 
        <teleport to='#portal'>
            <div v-if="isOpen" class="notification">
                this is rendering outside of this child component
            </div>
        </teleport>
    </div>
</template>

<script>
import { ref } from 'vue'
export default {
    setup () {
        const isOpen = ref(false);

        var closePopup;

        const ShowNotification = () => {
            isOpen.value = true

            clearTimeout(closePopup);

            closePopup = setTimeout(() => {