abc

Appearance

传送 (Teleport) ​

在实际项目中的交互基本都会使用到弹窗或者说弹框，
在编写组件的代码时，这些会视为组件在逻辑上的一部分，但有时更适合将这些代码置到其他位置如body后
(如 element-ui UI框架 的 el-dialog 组件 的 append-to-body参数选项 ,解决弹窗层级问题)
示例 ModalExample 弹窗

@/pages/40-lrn/20-vue3/20-teleport/components/ModalExample.vue

Tooltips with Vue 3 Teleport

vue
<template>
    <div style="position: relative;">
        <h3>Tooltips with Vue 3 Teleport</h3>
        <div>
            <ModalButton />
        </div>
    </div>
</template>

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

ModalButton 通过 <teleport to="body"> 可将节点插入到 其他位置 (这里是 body 元素后)

vue
<template>
    <button @click="modalOpen = true">点我打开弹窗</button>

    <teleport to="body">
        <div v-if="modalOpen" class="modal">
            <div>
                弹窗内容
                <button @click="modalOpen = false">关闭</button>
            </div>
        </div>
    </teleport>
</template>

<script lang="ts" setup>
import { ref } from "vue"
let modalOpen = ref(false);
</script>

<style>
.modal {
    position: fixed;
    top: 50px;
    right: 100px;
    bottom: 0;
    left: 0;
    z-index: 9999;
    overflow: auto;
    overflow-y: auto;

    display: flex;
    justify-content: center;
    align-items: center;
}

.modal > * {
    border: 1px solid lightgray;
    background-color: white;

    padding: 2em;
}
</style>

详情