<Teleport> (<Teleport>)
اینجا با «تلپورت در Vue» آشنا می شوی. «تلپورت (Teleport)» یعنی جابه جایی محتوا. یعنی یک تگ را از جای فعلی، به جای دیگری در DOM ببری.
تلپورت در Vue چیست؟
کامپوننت <Teleport> با prop به نام to کار می کند. این prop مقصد را مشخص می کند. مثلاً body. سپس عنصر از ساختار فعلی خارج می شود. اما هنوز در همان صفحه است.
برای دیدن جابه جایی، ابزار Inspect را باز کن. عنصر به مقصد منتقل شده است. اگر چند تلپورت به یک مقصد باشند، آخرین مورد پایین تر قرار می گیرد.
اگر یک کامپوننت را تلپورت کنی، ارتباط prop/emit یا provide/inject مثل قبل کار می کند. چون منطق ارتباطی جابه جا نمی شود.
اگر بخشی از محتوا را تلپورت کنی، کدهای داخل <script> و <style> همان کامپوننت، همچنان روی آن محتوا اثر دارند.
ویژگی ها (Props)
- to: اجباری، رشته. مقصد عنصر تلپورت شده را مشخص می کند.
- disabled: اختیاری، بولین. اگر true باشد، تلپورت موقتاً غیرفعال می شود.
نمونه سریع تلپورت به body
در این مثال، یک <div> به ریشه body می رود. مثل وقتی که یک اعلان را همیشه بالای صفحه می خواهی.
<template>
<Teleport to="body">
<div id="redDiv">Hello!</div>
</Teleport>
</template>
تلپورت همراه با منطق و استایل
این مثال نشان می دهد استایل scoped و محاسبات reactive روی محتوای تلپورت شده هم اعمال می شوند.
<template>
<div>
<h2>Component</h2>
<p>This is the inside of the component.</p>
<Teleport to="body">
<div
id="redDiv"
@click="toggleVal = !toggleVal"
:style="{ backgroundColor: bgColor }"
>
Hello!<br>
Click me!
</div>
</Teleport>
</div>
</template>
<script>
export default {
data() {
return {
toggleVal: true
};
},
computed: {
bgColor() {
if (this.toggleVal) {
return "lightpink";
}
else {
return "lightgreen";
}
}
}
};
<\/script>
<style scoped>
#redDiv {
margin: 10px;
padding: 10px;
display: inline-block;
}
#redDiv:hover {
cursor: pointer;
}
</style>
روشن و خاموش کردن تلپورت
با prop بولین disabled می توانی تلپورت را موقتاً متوقف کنی.
<template>
<div>
<h2>Component</h2>
<p>This is the inside of the component.</p>
<button @click="teleportOn = !teleportOn">Teleport on/off</button>
<Teleport to="body" :disabled="teleportOn">
<div id="redDiv">Hello!</div>
</Teleport>
</div>
</template>
<script>
export default {
data() {
return {
teleportOn: true
};
}
};
<\/script>
<style scoped>
#redDiv {
background-color: lightcoral;
margin: 10px;
padding: 10px;
width: 100px;
}
</style>
گام های عملی برای استفاده
- مقصد مناسب را انتخاب کن؛ مثل body یا یک #modal-root.
- <Teleport to="مقصد"> را در قالب قرار بده.
- اگر لازم شد، با
disabledتلپورت را موقتاً خاموش کن. - با Inspect جابه جایی را بررسی کن و مطمئن شو.
نکته: تلپورت برای پاپ آپ، منو، و اعلان ها عالی است. این عناصر باید از محدودیت z-index والدها آزاد باشند.
هشدار: مقصد باید در DOM موجود باشد. اگر نبود، تلپورت نتیجه مطلوب نمی دهد.
جمع بندی سریع
- تلپورت در Vue، محتوا را جابه جا می کند.
- prop الزامی
toمقصد را تعیین می کند. - منطق و استایل همچنان کار می کنند.
disabledتلپورت را موقتاً خاموش می کند.- Inspect کمک می کند جابه جایی را ببینی.