vue3_Teleport

Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签(很可能是body)下插入显示

src\components\ModalButton.vue

<template>
    <button @click="modalOpen = true">
        App父级组件
    </button>

    <teleport to="body">
        <div v-if="modalOpen" class="modal">
            <div>
                窗体在body中
                <button @click="modalOpen = false">
                    Close
                </button>
            </div>
        </div>
    </teleport>
</template>

<script>
import { ref } from 'vue'
export default {
    name: 'modal-button',
    setup() {
        const modalOpen = ref(false)
        return {
            modalOpen
        }
    }
}
</script>


<style>
.modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 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;
}
</style>

src\App.vue

<template>
    <h2>App</h2>
    <modal-button></modal-button>
</template>

<script lang="ts">
import ModalButton from './components/ModalButton.vue'

export default {
    setup() {
        return {}
    },

    components: {
        ModalButton,
    },
}
</script>