西瓜视频Vue插件以及Teleport使用

安装

cnpm i xgplayer -S

---

使用说明

A就是屏幕右下角的隐藏盒子
C就是一个高度4000px的盒子，用来scrollTop超过340就右下角
B是盒子，原本里面就是msg，包了一层Teleport,去的是右下角的A。
切记这个右下角盒子必须在B的前面

<div id="A"> </div> //空的
<div class="B">
  <Teleport to="#A" :disabled="dis">
      <div id="msg"></div>
  </Teleport>
</div>
<div id="C"></div>

事件很简单

dis.value = true 禁用，他上来就去A，所以必须禁用！相当于没有Teleport
dis.value = false 取消禁用，没有禁用就被传送到A了

let dis = ref(true)

onMounted(() => {
    let pl = new Player({
        id: "msg",
        url: "http://rpuyhucx0.hn-bkt.clouddn.com/Studio.mp4",
        playbackRate: [0.5, 0.75, 1, 1.5, 10],
        width: "100%",
        height: "100%"
    })

    document.onscroll = () => {
        let a = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        if (a > 340) {
            dis.value = false
        } else {
            dis.value = true
        }

    }
})