Vue2实现Vue3中的Teleport传送门，【应用场景：实现B站视频播放效果】

Vue2实现Vue3中的Teleport传送门，【应用场景：实现B站视频播放效果】

先看下效果

在Vue3中​​​​ 是一个内置组件，使我们可以将一个组件的一部分模板“传送”到该组件的 DOM 层次结构之外的 DOM 节点中

官网：​​Teleport传送门​​

咱们可以使用Teleport实现一件有趣的事情 ，就是B站的视频播放效果。也就是当咱们播放视频，向下滚动至视频离开可视区，会在右下方出现一个小窗口继续咱们的视频播放，不会中断。

其实用Vue3还是蛮好实现的，通过Teleport传送门和useIntersectionObserver API可以轻松实现。这是我之前用vue3写的一个demo，感兴趣可以去瞅瞅喽 ​​使用Vue3中的Teleport API实现B站视频播放效果​​

接下正题：用Vue2实现同样的效果

咱们首先手写一个Teleport组件 ，能满足咱们的需求就可以。

Teleport组件

接受一个to属性和disabled属性，to属性表示传送到的目标元素dom id或者class类名。disabled表示什么时候要进行传送，true表示传送，false表示不传送

咱们监听 disabled变化就可以，this.$el是当前这个Teleport组件的所有dom节点，通过render函数渲染出dom并预留一个插槽

然后是父组件的逻辑编写：

视频我用的是 videojs，在我​​vue使用video.js​​

这篇博客有写，或者把视频去掉，改成文字，看看下传送的效果也是可以的，注意 #main 一定要有宽高，我这里是100% * 100% 根据实际情况稍作修改就好

其实Teleport 本质上也是，appendChild 去目标元素追加dom节点，根据 disabled 判断是向目标元素追加，还是再挂载到原来的位置

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。