Vue Teleport
Vue <Teleport>DOM স্ট্রাকচারে কন্টেন্টকে অন্য জায়গায় সরাতে একটি ট্যাগ ব্যবহার করা হয়।
<টেলিপোর্ট> এবং 'টু' অ্যাট্রিবিউট
Vue আপনাকে DOM কাঠামোর মধ্যে বিষয়বস্তু সরাতে দেয়<Teleport>আমরা বিষয়বস্তুর চারপাশে ট্যাগটি মুড়ে রাখি এবং এটিকে কোথায় সরাতে হবে তা নির্ধারণ করতে 'টু' বৈশিষ্ট্যটি ব্যবহার করি।
<Teleport to="body">
<p>Hello!</p>
</Teleport>'টু' অ্যাট্রিবিউটের মান সিএসএস কোড হিসাবে দেওয়া হয়েছে, তাই আপনি যদি উপরের কোডের মতো বডি ট্যাগে বিষয়বস্তু পাস করতে চান,<Teleport to="body">আমরা সেটা লিখি
কন্টেন্ট বডি ট্যাগে সরানো হয়েছে তা দেখতে লোড হওয়ার পর পৃষ্ঠাটি পরিদর্শন করুন।
টিপ:
টেলিপোর্ট আপনাকে আপনার উপাদানগুলির সংজ্ঞা বা যুক্তিকে প্রভাবিত না করেই DOM কাঠামোতে ভিজ্যুয়াল সামগ্রী পুনর্গঠন করতে দেয়৷
উদাহরণ
আপনার নিজস্ব Vue সার্ভার পান
CompOne.vue:
<template>
<div>
<h2>Component</h2>
<p>This is the inside of the component.</p>
<Teleport to="body">
<div id="redDiv">Hello!</div>
</Teleport>
</div>
</template>আপনি যদি আমাদের পৃষ্ঠায় ডান-ক্লিক করেন এবং 'পরিদর্শন' নির্বাচন করেন, তাহলে লাল<div>উপাদানটি উপাদান থেকে নির্গত হয়<body>ট্যাগের শেষে সরানো দেখা যায়।
যেমন,<div id="receivingDiv">আসুন আমরা যে বিষয়বস্তুটি সরাতে চাই তার চারপাশে একটি আইডি সহ একটি ট্যাগ দেওয়া যাক<Teleport to="#receivingDiv">যে ব্যবহার করে কিছু বিষয়বস্তু<div>টেলিপোর্ট করতে পারেন
টেলিপোর্ট করা উপাদানের স্ক্রিপ্ট এবং শৈলী
<Teleport>যদিও কিছু বিষয়বস্তু একটি ট্যাগ দ্বারা একটি উপাদান থেকে বাদ দেওয়া হয়,<script>এবং<style>ট্যাগের সংশ্লিষ্ট কোড এখনও সরানো সামগ্রীর জন্য কাজ করে।
উদাহরণ
উপরন্তু,<style>এবং<script>সংশ্লিষ্ট কোড ট্যাগ থেকে টেলিপোর্ট করা হয়<div>ট্যাগটি এখনও কাজ করে, যদিও এটি সংকলনের পরে উপাদানের ভিতরে নেই।
CompOne.vue:
<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>মূল পয়েন্ট:
টেলিপোর্টেড উপাদানগুলি তাদের উত্স উপাদানের সুযোগ এবং জীবনচক্র বজায় রাখে, তাই তারা যেখানে সরানো হোক না কেন তারা একই স্ক্রিপ্ট এবং শৈলীর নিয়মগুলি ভাগ করে।
Vue Teleport টিউটোরিয়াল
Vue Teleport সম্পর্কে আপনার বোঝার পরীক্ষা করতে এই টিউটোরিয়ালটি সম্পূর্ণ করুন।
Vue.js <Teleport> ?
টেলিপোর্ট সাধারণ ব্যবহারের ক্ষেত্রে
মডেল
মডেল ডায়ালগগুলিকে বডিতে টেলিপোর্ট করা জেড-ইনডেক্স সমস্যা প্রতিরোধ করে৷
টুলটিপস
মূল উপাদানগুলির CSS ওভারফ্লো সমস্যা থেকে টুলটিপগুলিকে মুক্ত করে
বিজ্ঞপ্তি
অ্যাপের উপরের স্তরে সঠিকভাবে প্রদর্শন করতে বিজ্ঞপ্তিগুলিকে সক্ষম করে৷
পূর্ণ-স্ক্রীন উপাদান
পূর্ণ-স্ক্রীন লোডার বা স্প্ল্যাশ স্ক্রীন পরিচালনা করে
সতর্কতা:
টেলিপোর্টের অতিরিক্ত ব্যবহার করবেন না। কম্পোনেন্টের অভ্যন্তরীণ DOM কাঠামো বজায় রাখা প্রায়শই ভাল। শুধুমাত্র জেড-ইনডেক্স, ওভারফ্লো বা ডিসপ্লে হায়ারার্কি সমস্যা সমাধানের জন্য টেলিপোর্ট ব্যবহার করুন।