vue2简单实现一个传送门的效果

今天，给大家分享一个有趣的技术，一个叫传送门的小组件实现，我们平时看直播的时候，直播软件上会有贴心的小窗口，今天我带大家就来实现一个传送门。

实现这个传送门我们借助三个插件大家先装好

分别为

1. 西瓜视频播放器（这里不是打广告哦，别的播放器也可以）：npm install xgplayer
2. vueuse组件库里面的uselntersectionObserver：npm i @vueuse/core
3. 传送门的插件：npm i vue2-teleport（这个插件是非官方的，官方的支持的是vue3）

好啦安装好下面的插件，我们开始实现-》

1. 我们去创建一个子组件，在里面创建两个div，一个div作为视频的原始位置，另一个作为小窗播放的div

<div style="height: 2000px;">
    
    
    <div style="width: 400px; height: 200px;" class="bigBox" ref="target">
                
                               原始div大窗
        <div id="mse" class="shipin"  ></div>
   
    </div>
   <!-- 目标容器 -->
    <div style="height: 100px;width: 200px;border: #000000 solid 1px;" class="bootm" id='oldmse'>
     
    </div>
    
  </div>

1. 下面用到的就是vueuse组件库里面的uselntersectionObserver，这个主要用来判断当前元素的可见性。我们来看一下调用的方法

<template>
  <div style="height: 2000px;">
    
    <slot name="shu" shu1="哈哈哈"></slot>
    <div style="width: 400px; height: 200px;" class="bigBox" ref="target">
                <!-- 需要传送的元素或者组件 -->
    
                //西瓜视频的播放器                              
        <div id="mse" class="shipin"  ></div>
      
    </div>
   <!-- 目标容器 -->
    <div style="height: 100px;width: 200px;border: #000000 solid 1px;" class="bootm" id='oldmse'>
     
    </div>
    
  </div>
</template>

<script lang="ts">
//西瓜视频播放器
  import Player from 'xgplayer'
  //vueuse插件
  import { useIntersectionObserver  } from '@vueuse/core'
  export default{
    name:"Keep",
    data(){
      return{
        isTrue:true
      }
    },
 
    mounted() {
    //西瓜视频的插件
      let player = new Player({
        id: 'mse',
        url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4'
      });
      //这个就是当监听的元素消失在当前的页面就为fase如果在就为true
      const { stop } = useIntersectionObserver(
            //通过ref属性获取监听的元素
              this.$refs.target,
              ([{ isIntersecting }]) => {
              //修改data中的数据
                this.isTrue=isIntersecting
               
              },
            )
    }
  }
</script>

1. 3、我们通过我们下的vue2 的传送门实现最后的效果，当前元素不在屏幕内了，我们就将播放器，传送到我们写的挂顶div里面

<template>
  <div style="height: 2000px;">
    
    
    <div style="width: 400px; height: 200px;" class="bigBox" ref="target">
                <!-- 需要传送的元素或者组件 -->
      <Teleport to='#oldmse' :disabled="isTrue" >                                     
                               <!-- :disabled="isTrue" 控制是否传送 -->
                   西瓜视频            
        <div id="mse" class="shipin"  ></div>
      </Teleport>
    </div>
   <!-- 目标容器 -->
    <div style="height: 100px;width: 200px;border: #000000 solid 1px;" class="bootm" id='oldmse'>
     
    </div>
    
  </div>
</template>

<script lang="ts">
  import Player from 'xgplayer'
  import Teleport from 'vue2-teleport';// 引入teleport'
  import { useIntersectionObserver  } from '@vueuse/core'
  export default{
    name:"Keep",
    data(){
      return{
      //是否传送的
        isTrue:true
      }
    },
    components:{
      Teleport
    },
    mounted() {
    //西瓜视频
      let player = new Player({
        id: 'mse',
        url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4'
      });
      //监听的元素是否在屏幕内部
      const { stop } = useIntersectionObserver(
              this.$refs.target,
              ([{ isIntersecting }]) => {
                this.isTrue=isIntersecting
    
              },
            )
    }
  }
</script>

好啦这样就通过以上我们就简单的实现了一个，当观看内容不在屏幕上了，就自动小窗播放的效果，同样给大家推荐vueuse是一款非常不错的工具库，里面有好多使用的工具函数，大家有不懂的地方私信我。谢谢大家！