<Teleport> เรนเดอร์มาร์กอัปของคอมโพเนนต์ที่ ตำแหน่งต่างในโดม ไม่ใช่ที่ที่มีการประกาศในแผนผังคอมโพเนนต์ของคุณ — แต่ยังคงเป็นส่วนตรรมชาติของคอมโพเนนต์ (ปฏิกิริยา props อีเวนต์ทั้งหมดยังคงทำงาน).
โมดัล ทูลทิป และการแจ้งเตือนมักจะต้องเป็น เพื่อหลีกเลี่ยงปัญหา CSS — , หรือบริบท stacking ของพ่อแม่สามารถตัดหรือวางโมดัลไม่ถูกต้องได้ แต่จากตรรมชาติแล้ว โมดัลเป็นของคอมโพเนนต์ที่ทริกเกอร์มัน
<body>overflow: hiddentransformz-index<template>
<button @click="open = true">Open Modal</button>
<Teleport to="body"> <!-- render this elsewhere... -->
<div v-if="open" class="modal-overlay">
<div class="modal">
<p>I'm declared inside this component...</p>
<p>...but rendered as a child of <body>!</p>
<button @click="open = false">Close</button>
</div>
</div>
</Teleport>
</template>
มาร์กอัปของโมดัล ถูกย้าย ให้เป็นลูกของ <body> ในโดมจริง หลีกเลี่ยงพ่อแม่ที่ตัด/สแต็ก — อย่างไรก็ตาม open, @click และ props ทั้งหมดยังคงมีปฏิกิริยาอย่างเต็มที่ เพราะจากตรรมชาติแล้วมันยังคงเป็นส่วนของคอมโพเนนต์นี้
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
ด้วยการหลีกเลี่ยงบรรพบุรุษที่พื้นเพ โมดัลสามารถคลุมวิวพอร์ตทั้งหมดได้อย่างเชื่อถือได้ และนั่งอยู่เหนือเนื้อหาอื่นทั้งหมดด้วย z-index ที่คาดเดาได้
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport แก้ไขปัญหา CSS คลาสสิกของ overlays (โมดัล ทูลทิป โทสต์ ดรอปดาวน์) ที่ถูกตัดหรือวางผิดโดยบรรพบุรุษ DOM ของพวกเขาอย่างสะอาด
มันช่วยให้คุณเขียน overlay ที่มันเป็นของจากตรรมชาติ (ภายในคอมโพเนนต์ที่ทริกเกอร์ ด้วยปฏิกิริยาเต็มที่) ขณะเรนเดอร์มันที่มันต้องอยู่ในโดม (มักจะเป็น <body>)
นี่คือเทียบเท่าของ Vue ในตัวสำหรับ React portals — วิธีมาตรฐาน แข็งแรง ในการสร้าง overlay UI
คลังคำถามสัมภาษณ์งาน IT พร้อมคำตอบโดยละเอียด — ตั้งแต่ระดับ Junior ถึง Senior
บริจาค