蓝狮注册开户Vue3中的teleport节点传送

vue3 teleport官方文档地址:https://vuejs.org/guide/built-ins/teleport.html

Vue3中的teleport api极大方便了在Vue3业务逻辑中操作移动dom位置。

简单举例

1.当teleportToTarget 为#idTest时,节点会被传输到 #idTest 节点中,等同于
// let teleportToTarget = ref(‘#idtest’);

2.当teleportToTarget 为.main时,节点会被传输到 .main时 节点中,多个class同名,蓝狮注册开户默认会传输到第一个节点中。等同于
// let teleportToTarget = ref(‘.main’);

3.当teleportToTarget 为body时,节点会被传输到html元素的body节点末尾中。
// let teleportToTarget = ref(‘body’);

4.删除节点
需要动态删除节点,蓝狮注册只需要用v-if动态控制节点存在,dom节点会动态跟随teleportToTargetShow布尔值动态是否存在。

传送节点

0 Comments
Leave a Reply