组件之间传递消息

src/messageHooks/pptScreen.ts

@@ -0,0 +1,38 @@
+import { onMounted, onUnmounted, watch } from "vue"
+import { useSlidesStore } from "@/store"
+import useExecPlay from "@/views/Screen/hooks/useExecPlay"
+
+export const changePageSlideMes = () => {
+  const { execPrev, execNext } = useExecPlay()
+  const slidesStore = useSlidesStore()
+
+  /** 初始化ppt完成之后给父级传递消息 */
+  function pptInitMes() {
+    window.parent.postMessage({ type: "initPPT", content: { slidesLen: slidesStore.slides.length } }, "*")
+  }
+  function handleMessage(event: any) {
+    const { type, content } = event.data || {}
+    if (type === "changePageSlide") {
+      if (content === "prev") {
+        execPrev()
+      } else if (content === "next") {
+        execNext()
+      }
+    }
+  }
+
+  pptInitMes()
+  watch(
+    () => slidesStore.slideIndex,
+    () => {
+      // 翻页完成之后的事件
+      window.parent.postMessage({ type: "changeSlideIndex", content: { slideIndex: slidesStore.slideIndex } }, "*")
+    }
+  )
+  onMounted(() => {
+    window.addEventListener("message", handleMessage)
+  })
+  onUnmounted(() => {
+    window.removeEventListener("message", handleMessage)
+  })
+}

src/views/Screen/index.vue

@@ -6,29 +6,33 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue'
-import { KEYS } from '@/configs/hotkey'
-import useScreening from '@/hooks/useScreening'
+import { onMounted, onUnmounted, ref } from "vue"
+import { KEYS } from "@/configs/hotkey"
+import useScreening from "@/hooks/useScreening"
 
-import BaseView from './BaseView.vue'
-import PresenterView from './PresenterView.vue'
+import BaseView from "./BaseView.vue"
+import PresenterView from "./PresenterView.vue"
+import { changePageSlideMes } from "@/messageHooks/pptScreen"
 
-const viewMode = ref<'base' | 'presenter'>('base')
+const viewMode = ref<"base" | "presenter">("base")
 
-const changeViewMode = (mode: 'base' | 'presenter') => {
+const changeViewMode = (mode: "base" | "presenter") => {
   viewMode.value = mode
 }
 
 const { exitScreening } = useScreening()
 
+// mes 翻页
+changePageSlideMes()
+
 // 快捷键退出放映
 const keydownListener = (e: KeyboardEvent) => {
   const key = e.key.toUpperCase()
   if (key === KEYS.ESC) exitScreening()
 }
 
-onMounted(() => document.addEventListener('keydown', keydownListener))
-onUnmounted(() => document.removeEventListener('keydown', keydownListener))
+onMounted(() => document.addEventListener("keydown", keydownListener))
+onUnmounted(() => document.removeEventListener("keydown", keydownListener))
 </script>
 
 <style lang="scss" scoped>
@@ -36,4 +40,4 @@ onUnmounted(() => document.removeEventListener('keydown', keydownListener))
   width: 100%;
   height: 100%;
 }
-</style>
+</style>