Vue.js

উপস্থিতি

এই পৃষ্ঠায়

Teleport ​

Watch a free video lesson on Vue School

<Teleport> হল একটি অন্তর্নির্মিত কম্পোনেন্ট যা আমাদেরকে একটি কম্পোনেন্টের টেমপ্লেটের একটি অংশকে একটি DOM নোডে "টেলিপোর্ট" করতে দেয় যা সেই কম্পোনেন্টের DOM অনুক্রমের বাইরে বিদ্যমান।

Basic Usage ​

কখনও কখনও একটি উপাদানের টেমপ্লেটের একটি অংশ যৌক্তিকভাবে এটির অন্তর্গত, কিন্তু একটি চাক্ষুষ দৃষ্টিকোণ থেকে, এটি DOM-এ অন্য কোথাও প্রদর্শিত হওয়া উচিত, সম্ভবত Vue অ্যাপ্লিকেশনের বাইরেও।

একটি পূর্ণ-স্ক্রীন মডেল তৈরি করার সময় এটির সবচেয়ে সাধারণ উদাহরণ। আদর্শভাবে, আমরা চাই মোডালের বোতামের কোড এবং মডেলটি একই একক-ফাইল উপাদানের মধ্যে লেখা হোক, যেহেতু তারা উভয়ই মোডেলের খোলা/বন্ধ অবস্থার সাথে সম্পর্কিত। কিন্তু এর অর্থ হল মোডালটি বোতামের পাশাপাশি রেন্ডার করা হবে, অ্যাপ্লিকেশনটির DOM অনুক্রমের মধ্যে গভীরভাবে নেস্টেড। CSS এর মাধ্যমে মোডাল অবস্থান করার সময় এটি কিছু জটিল সমস্যা তৈরি করতে পারে।

নিম্নলিখিত HTML গঠন বিবেচনা করুন.

template
<div class="outer">
  <h3>Vue Teleport Example</h3>
  <div>
    <MyModal />
  </div>
</div>

এবং এখানে <MyModal> এর বাস্তবায়ন:

vue
<script setup>
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <button @click="open = true">Open Modal</button>

  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</template>

<style scoped>
.modal {
  position: fixed;
  z-index: 999;
  top: 20%;
  left: 50%;
  width: 300px;
  margin-left: -150px;
}
</style>
vue
<script>
export default {
  data() {
    return {
      open: false
    }
  }
}
</script>

<template>
  <button @click="open = true">Open Modal</button>

  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</template>

<style scoped>
.modal {
  position: fixed;
  z-index: 999;
  top: 20%;
  left: 50%;
  width: 300px;
  margin-left: -150px;
}
</style>

কম্পোনেন্টটিতে রয়েছে একটি <button> মোডাল খোলার ট্রিগার করার জন্য, এবং একটি <div> রয়েছে .modal এর একটি ক্লাস সহ, যেটিতে মোডালের বিষয়অবজেক্ট থাকবে এবং স্ব-বন্ধ করার জন্য একটি button থাকবে।

প্রাথমিক HTML কাঠামোর ভিতরে এই কম্পোনেন্টটি ব্যবহার করার সময়, বেশ কয়েকটি সম্ভাব্য সমস্যা রয়েছে:

  • position: fixed শুধুমাত্র Vueপোর্টের সাপেক্ষে কম্পোনেন্টটিকে রাখে যখন কোনো ancestor কম্পোনেন্টের transform, perspective বা filter বৈশিষ্ট্য সেট না থাকে। উদাহরণস্বরূপ, যদি আমরা একটি CSS ট্রান্সফর্মের সাথে ancestor <div class="outer">কে অ্যানিমেট করতে চাই, তাহলে এটি মডেল বিন্যাসকে ভেঙে দিবে!

  • মডেলের z-index এর কম্পোনেন্টগুলি দ্বারা সীমাবদ্ধ। যদি আরেকটি কম্পোনেন্ট থাকে যা <div class="outer"> এর সাথে ওভারল্যাপ করে এবং উচ্চতর z-index থাকে, তাহলে এটি আমাদের মডেলকে কভার করবে।

<Teleport> আমাদের নেস্টেড DOM কাঠামো থেকে বেরিয়ে আসার অনুমতি দিয়ে এগুলোর চারপাশে কাজ করার একটি পরিষ্কার উপায় প্রদান করে। চলুন <Teleport> ব্যবহার করতে <MyModal> পরিবর্তন করি:

template
<button @click="open = true">Open Modal</button>

<Teleport to="body">
  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</Teleport>

<Teleport>-এর to লক্ষ্য একটি CSS নির্বাচক স্ট্রিং বা একটি প্রকৃত DOM নোড আশা করে। এখানে, আমরা মূলত Vue কে বলছি "teleport এই template fragment to body tag"।

আপনি নীচের বোতামে ক্লিক করতে পারেন এবং আপনার ব্রাউজারের devtools এর মাধ্যমে <body> ট্যাগ পরিদর্শন করতে পারেন:

অ্যানিমেটেড মডেল তৈরি করতে আপনি <Teleport> এর সাথে <Transition> একত্রিত করতে পারেন - এখানে উদাহরণ দেখুন।

TIP

যখন <Teleport> কম্পোনেন্ট মাউন্ট করা হয় তখন টেলিপোর্ট to টার্গেটকে অবশ্যই DOM-এ থাকতে হবে। আদর্শভাবে, এটি সম্পূর্ণ Vue অ্যাপ্লিকেশনের বাইরে একটি কম্পোনেন্ট হওয়া উচিত। যদি Vue দ্বারা রেন্ডার করা অন্য একটি কম্পোনেন্টকে টার্গেট করা হয়, তাহলে আপনাকে নিশ্চিত করতে হবে যে কম্পোনেন্টটি <Teleport> এর আগে মাউন্ট করা আছে।

Using with Components ​

<Teleport> শুধুমাত্র রেন্ডার করা DOM কাঠামোকে পরিবর্তন করে - এটি কম্পোনেন্টগুলির যৌক্তিক অনুক্রমকে প্রভাবিত করে না। অর্থাৎ, যদি <Teleport> একটি কম্পোনেন্ট থাকে, তাহলে সেই কম্পোনেন্টটি <Teleport> ধারণকারী প্যারেন্ট কম্পোনেন্টের লজিক্যাল চাইল্ড হিসেবে থাকবে। প্রপস পাসিং এবং ইভেন্ট এমিটিং একইভাবে কাজ করতে থাকবে।

এর মানে হল যে একটি অভিভাবক কম্পোনেন্ট থেকে ইনজেকশনগুলি প্রত্যাশিতভাবে কাজ করে এবং প্রকৃত সামগ্রী যেখানে স্থানান্তরিত হয়েছে সেখানে স্থাপন করার পরিবর্তে, Vue Devtools-এ মূল কম্পোনেন্টের নীচে চাইল্ড কম্পোনেন্টটি নেস্ট করা হবে৷

Disabling Teleport ​

কিছু ক্ষেত্রে, আমরা শর্তসাপেক্ষে <Teleport> অক্ষম করতে চাই। উদাহরণস্বরূপ, আমরা ডেস্কটপের জন্য একটি ওভারলে হিসাবে একটি কম্পোনেন্ট রেন্ডার করতে চাই, কিন্তু মোবাইলে ইনলাইন। <Teleport> disabled প্রপ সমর্থন করে যা গতিশীলভাবে টগল করা যেতে পারে:

template
<Teleport :disabled="isMobile">
  ...
</Teleport>

আমরা তখন গতিশীলভাবে isMobile আপডেট করতে পারি।

Multiple Teleports on the Same Target ​

একটি সাধারণ ব্যবহারের ক্ষেত্রে একটি পুনঃব্যবহারযোগ্য <Modal> উপাদান হবে, একই সময়ে একাধিক দৃষ্টান্ত সক্রিয় হওয়ার সম্ভাবনা সহ। এই ধরনের দৃশ্যের জন্য, একাধিক <Teleport> উপাদান একই টার্গেট এলিমেন্টে তাদের বিষয়বস্তু মাউন্ট করতে পারে। অর্ডারটি একটি সাধারণ সংযোজন হবে, যার মধ্যে পরবর্তী মাউন্টগুলি পূর্ববর্তীগুলির পরে অবস্থিত, তবে সমস্ত টার্গেট উপাদানের মধ্যে।

নিম্নলিখিত ব্যবহার দেওয়া:

template
<Teleport to="#modals">
  <div>A</div>
</Teleport>
<Teleport to="#modals">
  <div>B</div>
</Teleport>

রেন্ডার করা ফলাফল হবে:

html
<div id="modals">
  <div>A</div>
  <div>B</div>
</div>

Deferred Teleport ​

Vue 3.5 এবং তার উপরে, আমরা 'defer' প্রপ ব্যবহার করতে পারি যতক্ষণ না অ্যাপ্লিকেশনটির অন্যান্য অংশগুলি মাউন্ট করা হয় একটি টেলিপোর্টের লক্ষ্য সমাধানকে পিছিয়ে দিতে। এটি টেলিপোর্টকে একটি ধারক কম্পোনেন্টকে লক্ষ্য করার অনুমতি দেয় যা Vue দ্বারা রেন্ডার করা হয়, তবে কম্পোনেন্ট গাছের পরবর্তী অংশে:

template
<Teleport defer to="#late-div">...</Teleport>

<!-- somewhere later in the template -->
<div id="late-div"></div>

মনে রাখবেন যে লক্ষ্য কম্পোনেন্টটি টেলিপোর্টের সাথে একই মাউন্ট/আপডেট টিক-এ রেন্ডার করতে হবে - যেমন যদি <div> মাত্র এক সেকেন্ড পরে মাউন্ট করা হয়, টেলিপোর্ট এখনও একটি ত্রুটি রিপোর্ট করবে। ডিফারটি 'মাউন্ট করা' লাইফসাইকেল হুকের মতোই কাজ করে।

সম্পর্কিত

GitHub-এ এই পৃষ্ঠাটি সম্পাদনা করুন