thridLargeScreen/src/views/healthManagement/healthPPT.vue

<template>
  <div class="ppt-main" ref="healthPptMain" @click="fullscreen">

    <div v-for="(item, index) in list" :ref="el => (imgRefs[index] = el)" class="w-screen h-screen animate__animated">
      <el-image
        :key="index"
        :src="item"
        class="w-full h-full select-none animate__animated"
        alt=""
        mode="contain"
        fit="contain"
      />
    </div>
  </div>
</template>

<script setup>
import { request } from "@/utils";
import { nextTick } from "vue";
import {
  reactive,
  computed,
  ref,
  provide,
  onMounted,
  onBeforeUnmount
} from "vue";

import { useRouter, useRoute } from "vue-router";
const [route, router] = [useRoute(), useRouter()];
const healthPptMain = ref()
const imgRefs = ref([]);

const pptNode = ref();
const list = ref([]);
const getPPTNode = async () => {
  const { data } = await request.get(`/graphService/open/node/paginate`, {
    params: {
      page: 1,
      pageSize: 1,
      pagesize: 1,
      tag: "用户ID",
      name: route.query.archivesId
    }
  });
  if (data.list[0]) {
    pptNode.value = data.list[0];
    if (pptNode.value.properties) {
      list.value = pptNode.value.properties["PPT地址"] || [];
      imgRefs.value = Array(list.value.length).fill({});
      nextTick(() => {
        imgRefs.value.forEach(img => {
          observer.observe(img);
        });
      });
    }
  }
};
getPPTNode();

const observer = new IntersectionObserver(entries => {
  console.log(entries);
  entries.forEach(entry => {
    console.log(entry);
    if (entry.isIntersecting) {
      entry.target.classList.add("animate__fadeIn");
    } else {
      // entry.target.classList.remove("animate__fadeInUp");
    }
  });
});
onMounted(() => {
  // setTimeout(() => {
  //   document.body.requestFullscreen()
  // }, 10);
  fullscreen()
});

onBeforeUnmount(() => {
  imgRefs.value.forEach(img => {
    observer.unobserve(img);
  });
});
const fullscreen = () => {

  document.body.requestFullscreen();
}
window.addEventListener('message', (event) => {
    if (event.data === 'goFullscreen') {
      healthPptMain.value.click();
    }
  });
</script>

<style lang="scss" scoped>
body {
  scroll-behavior: smooth;
}
.ppt-main {
  overflow-x: hidden;
  overflow-y: scroll; /* overflow 为 scroll，来把滚动条设置到 main 元素上 */
  height: 100vh;
  scroll-snap-type: y mandatory; /* scroll-snap-type 需要两个值，第一个值为滚动贴合的方向，y 表示纵向滚动贴合，第二个值为贴合方式，mandatory 表示强制滚动，用户只要一滚动鼠标，下一屏内容就直接滚动上来进行贴合。 */
  // scroll-behavior: smooth; /* 添加平滑滚动效果 */
  div {
    place-items: center;
    scroll-snap-align: center;
  }
}
</style>