Vue3中的teleport節點傳送

天渺工作室發表於2022-06-22
Vue

Vue3 teleport官方文件地址：https://vuejs.org/guide/built...

Vue3中的teleport API極大方便了在Vue3業務邏輯中操作移動Dom位置。

簡單舉例

<script setup lang="ts">
    // 控制節點
    let teleportToTarget = ref<string>('#idtest');
</script>
<template>
    <div id="idTest">id節點1</div>
    <div class="main">main節點1</div>
    <div class="main">main節點2</div>
    
    <teleport  :to="teleportToTarget">
        <div>傳送節點</div>
    </teleport>
</template>

1.當teleportToTarget 為#idTest時,節點會被傳輸到 #idTest 節點中，等同於

// let teleportToTarget = ref<string>('#idtest');
<template>
    <div id="idTest">
        id節點1<div>傳送節點</div>
    </div>
    <div class="main">main節點1</div>
    <div class="main">main節點2</div>
</template>

2.當teleportToTarget 為.main時,節點會被傳輸到 .main時 節點中，多個class同名，預設會傳輸到第一個節點中。等同於

// let teleportToTarget = ref<string>('.main');
<template>
    <div id="idTest">id節點1</div>
    <div class="main">
        main節點1
        <div>傳送節點</div>
    </div>
    <div class="main">main節點2</div>
</template>

3.當teleportToTarget 為body時,節點會被傳輸到html元素的body節點末尾中。

// let teleportToTarget = ref<string>('body');

image.png

4.刪除節點

需要動態刪除節點，只需要用v-if動態控制節點存在,dom節點會動態跟隨teleportToTargetShow布林值動態是否存在。

<script setup lang="ts">
    // 控制節點
    let teleportToTarget = ref<string>('#idtest');
    // 控制傳輸節點是否存在
    let teleportToTargetShow = ref<boolean>(true);
</script>
<teleport v-if="teleportToTargetShow" :to="teleportToTarget">
   <div>傳送節點</div>
</teleport>

相關文章