关于vue3:Vue3中的teleport节点传送

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');

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>