唯品秀前端博客

在一些场景中,比如使用modaltoast时,我们想要将modal放在具体的vue组件中,功能与位置保持一致,这样我们的modal很轻松能用到当前组件的data值,但是在展示时,又希望直接将它放在body下,方便实现定位样式。面对功能位置与样式位置的不统一,vue3中提供一对teleport标签用于移动dom的位置到指定元素。

html根页面

1
2
3
4
<body>
  <div id="app"></div>
  +  <div id="teleport-target"></div> //后面将内容传送到该div下,当然,它可以传送到任何节点下,甚至是body
</body>

组件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<button @click="showToast" class="btn">打开 toast</button>
<!-- to 属性就是目标位置 -->
<teleport to="#teleport-target">
  <div v-if="visible" class="toast-wrap">
    <div class="toast-msg">我是一个 Toast 文案</div>
  </div>
</teleport>

import { ref } from 'vue';
export default {
  setup() {
    // toast 的封装
    const visible = ref(false);
    let timer;
    const showToast = () => {
      visible.value = true;
      clearTimeout(timer);
      timer = setTimeout(() => {
        visible.value = false;
      }, 2000);
    }
    return {
      visible,
      showToast
    }
  }
}

效果

可以看到,我们使用 teleport 组件,通过 to 属性,指定该组件渲染的位置与id="app"的div同级,也就是在body下,但是teleport的状态visible又是完全由内部Vue组件控制

强调

纵然该方法使用起来异常随心所欲,但值得注意的是传送的目的地节点一定是要先渲染存在,例如组件A想传送到组件B下,那么一定要保证组件B顺序在前面先渲染存在该节点

结语

在Vue2,如果想要实现类似的功能,需要通过第三方库portal-vue去实现,感兴趣可以了解一下,有了Teleport让我们面对这类问题时候处理变得异常简单

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(0) 打赏
标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"Vue 3任意传送门Teleport-王者荣耀大桥传送大招上线至Vue3了"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏